《AJAX：前端异步交互的魔法指南》
什么是AJAX
AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML） 是一种用于创建异步网页应用的技术，允许网页在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面内容。尽管名称中包含 XML，但现代 AJAX 主要使用 JSON（JavaScript Object Notation）作为数据格式。
核心原理
-
异步通信
-
浏览器通过 JavaScript 异步发送请求到服务器，同时用户可继续操作页面。
-
服务器返回数据后，JavaScript 动态更新页面指定部分，无需刷新整个页面。
-
-
基于
XMLHttpRequest或Fetch API-
传统 AJAX 使用
XMLHttpRequest对象发起请求。 -
现代开发中更常用
Fetch API（基于 Promise，语法更简洁）。
-
工作流程
sequenceDiagramparticipant 用户participant 浏览器participant 服务器用户->>浏览器: 触发事件（点击、滚动等）浏览器->>服务器: 发送异步请求（XHR/Fetch）服务器->>浏览器: 返回数据（JSON/XML/HTML）浏览器->>用户: 局部更新页面内容
关键特点
| 特性 | 说明 |
|---|---|
| 异步性 | 不阻塞用户操作，后台完成数据交互。 |
| 无刷新更新 | 仅更新页面局部内容，避免整页重载。 |
| 数据格式灵活 | 支持 JSON、XML、HTML 或纯文本。 |
| 依赖 JavaScript | 需浏览器启用 JavaScript。 |
| 跨域限制 | 默认受同源策略限制，需通过 CORS（跨域资源共享）或代理解决跨域问题。 |
-
使用浏览器的 XMLHttpRequest 对象 与服务器通信
-
浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页。
什么是axios
Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专为浏览器和 Node.js 设计，用于简化前端与后端的数据交互。它封装了底层 HTTP 请求细节，提供了更简洁、易用的 API，并支持拦截器、自动 JSON 转换、请求取消等高级功能，是替代原生 XMLHttpRequest 和 Fetch API 的流行选择。
核心特性
| 特性 | 说明 |
|---|---|
| 基于 Promise | 天然支持异步编程，避免回调地狱，可使用 async/await 简化代码。 |
| 浏览器 & Node.js 支持 | 同一套代码兼容浏览器（XHR）和 Node.js（HTTP 模块）。 |
| 自动 JSON 转换 | 自动将请求/响应数据与 JSON 格式互相转换。 |
| 拦截器机制 | 可全局拦截请求和响应，用于添加身份验证、日志、错误处理等统一逻辑。 |
| 取消请求 | 支持主动取消未完成的请求（如用户离开页面时终止无用请求）。 |
| 并发请求 | 通过 axios.all() 和 axios.spread() 处理多个并行请求。 |
| 客户端防御 XSRF | 支持自动添加 XSRF Token 到请求头，增强安全性。 |
| 超时控制 | 可设置请求超时时间，避免长时间等待无响应。 |
基础用法示例
1. 发起 GET 请求
import axios from 'axios';// 基本 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data); // 响应数据}).catch(error => {console.error('请求失败:', error);});// 带参数的 GET 请求
axios.get('https://api.example.com/user', {params: {id: 123,type: 'vip'}
});2. 发起 POST 请求
axios.post('https://api.example.com/login', {username: 'admin',password: '123456'
})
.then(response => {console.log('登录成功:', response.data.token);
});3. 并发请求
const getUser = axios.get('/user/123');
const getPosts = axios.get('/posts');axios.all([getUser, getPosts]).then(axios.spread((userRes, postsRes) => {console.log('用户数据:', userRes.data);console.log('帖子数据:', postsRes.data);}));4. 全局配置
// 设置全局默认值（如 API 基础路径）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.timeout = 5000; // 5秒超时高级功能
1. 拦截器（Interceptors）
// 添加请求拦截器（如添加 Token）
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, error => {return Promise.reject(error);
});// 添加响应拦截器（如统一处理错误）
axios.interceptors.response.use(response => {return response.data; // 直接返回数据部分
}, error => {if (error.response.status === 401) {alert('登录已过期，请重新登录！');window.location.href = '/login';}return Promise.reject(error);
});2. 取消请求
const source = axios.CancelToken.source();axios.get('/data', {cancelToken: source.token
}).catch(error => {if (axios.isCancel(error)) {console.log('请求被取消:', error.message);}
});// 取消请求（参数为可选提示信息）
source.cancel('用户主动取消操作');Axios vs Fetch API
| 对比项 | Axios | Fetch API |
|---|---|---|
| 语法简洁性 | 封装度高，API 更简洁 | 原生 API，需手动处理更多细节 |
| JSON 转换 | 自动转换请求/响应数据 | 需手动调用 response.json() |
| 拦截器 | 支持全局请求/响应拦截 | 无内置拦截器，需自行封装 |
| 取消请求 | 内置支持 | 通过 AbortController 实现 |
| 浏览器兼容性 | 兼容 IE11+（需 polyfill） | 兼容现代浏览器，IE 不支持 |
| 超时控制 | 直接通过 timeout 配置 | 需结合 setTimeout 和 AbortController |
常见问题解决
-
跨域请求（CORS）
-
需后端配置
Access-Control-Allow-Origin等响应头。 -
开发环境可通过代理（如 Webpack DevServer 代理）绕过。
-
-
文件上传
const formData = new FormData(); formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' } }); -
错误处理统一封装
建议通过拦截器集中处理 HTTP 状态码和业务错误码。
什么是URL
URL（Uniform Resource Locator，统一资源定位符） 是用于标识和定位互联网上资源（如网页、图片、视频等）的字符串。它是 Web 的核心组成部分，用户通过 URL 访问特定资源，浏览器通过 URL 向服务器请求数据。
URL 的结构
一个完整的 URL 通常由以下部分组成：
协议://主机名:端口号/路径?查询参数#片段标识符示例
https://www.example.com:443/path/to/resource?name=value#section1
URL 的组成部分详解
| 部分 | 说明 |
|---|---|
| 协议（Scheme） | 指定访问资源使用的协议，常见的有： - http：超文本传输协议- https：加密的 HTTP- ftp：文件传输协议- mailto：电子邮件地址 |
| 主机名（Host） | 资源所在服务器的域名或 IP 地址，如 www.example.com。 |
| 端口号（Port） | 服务器监听的端口号，默认端口可省略（如 HTTP 默认 80，HTTPS 默认 443）。 |
| 路径（Path） | 资源在服务器上的具体位置，如 /path/to/resource。 |
| 查询参数（Query） | 以 ? 开头，包含键值对，用于传递额外信息，如 ?name=value&age=25。 |
| 片段标识符（Fragment） | 以 # 开头，指向资源内部的特定部分（如 HTML 页面的锚点）。 |
URL里的查询参数
什么是查询参数 ?
-
携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
-
举例：查询河北省下属的城市列表，需要先把河北省传递给服务器
-
查询参数的语法 ？
-
在 url 网址后面用?拼接格式：XXXX参数名1=值1&参数名2=值2
-
参数名一般是后端规定的，值前端看情况传递即可
-
-
axios 如何携带查询参数?
使用 params 选项即可
axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})常用请求和数据提交
想要提交数据，先来了解什么是请求方法
-
请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。
什么时候进行数据提交呢？
-
例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问
axios 如何提交数据到服务器呢？
axios({url: '目标资源地址',method: '请求方法',data: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})AXIOS的错误处理
Axios 的错误处理 是开发中非常重要的一部分，能够有效应对网络请求中的各种异常情况（如网络错误、服务器错误、超时等）。Axios 提供了多种方式来处理错误，包括 catch 方法、try/catch 语法（结合 async/await）以及拦截器机制。
Axios 的错误对象包含以下关键属性：
-
message：错误描述。 -
response：服务器返回的响应对象（如果有）。-
status：HTTP 状态码（如 404、500）。 -
data：服务器返回的错误数据。
-
-
request：请求对象（如果请求已发出但未收到响应）。 -
config：请求的配置信息。
示例：使用 catch 处理错误
axios.get('https://api.example.com/data').then(response => {console.log('请求成功:', response.data);}).catch(error => {if (error.response) {// 服务器返回了错误状态码（4xx/5xx）console.error('服务器错误:', error.response.status, error.response.data);} else if (error.request) {// 请求已发出但未收到响应console.error('网络错误:', error.message);} else {// 其他错误（如配置错误）console.error('请求配置错误:', error.message);}});示例：使用 async/await 处理错误
async function fetchData() {try {const response = await axios.get('https://api.example.com/data');console.log('请求成功:', response.data);} catch (error) {if (error.response) {console.error('服务器错误:', error.response.status, error.response.data);} else if (error.request) {console.error('网络错误:', error.message);} else {console.error('请求配置错误:', error.message);}}
}
表白是表明心意，不是索取关系。