在前端开发中，与后端进行数据交互是核心需求之一，而 Axios 作为目前最流行的 HTTP 请求库，凭借其简洁的 API、完善的功能和良好的兼容性，成为了开发者的首选工具。本文将从基础概念出发，逐步深入到高级用法，帮助你彻底掌握 Axios 的使用。
一、Axios 是什么？
Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境，主要用于发送 HTTP 请求（如 GET、POST、PUT、DELETE 等），并能便捷地处理请求 / 响应拦截、错误处理、请求取消等场景。
它的核心优势包括：
- 支持 Promise API，可配合
async/await语法，代码更简洁； - 浏览器端自动转换 JSON 数据，无需手动解析；
- 支持请求 / 响应拦截器，便于统一处理请求头、token、错误等；
- 可取消请求，避免无效请求浪费资源；
- 自动拦截请求异常，便于全局错误处理；
- 兼容主流浏览器（包括 IE 11+）和 Node.js 环境。
二、Axios 基础：安装与简单使用
1. 安装方式
根据项目环境选择对应的安装方法：
- npm/yarn 安装（适用于 Vue/React 等工程化项目）：
bash
# npm npm install axios --save # yarn yarn add axios - CDN 引入（适用于简单页面或非工程化项目）：
html
预览
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. 核心请求方法
Axios 提供了两种核心使用方式：直接调用请求方法（如 axios.get()）和 配置式请求（axios(config)），前者是后者的语法糖，更简洁直观。
（1）GET 请求（获取数据）
常用于从后端获取数据，参数可通过 URL 拼接或 params 配置传递：
javascript
运行
// 方式1：直接拼接参数到 URL
axios.get('/api/user?id=123').then(response => {console.log('请求成功：', response.data); // 响应体数据在 data 中}).catch(error => {console.log('请求失败：', error.message);});
// 方式2：通过 params 配置传递参数（推荐，自动拼接 URL）
axios.get('/api/user', {params: { id: 123, name: '张三' } // 最终 URL 为 /api/user?id=123&name=张三
})
.then(res => console.log(res.data))
.catch(err => console.log(err));（2）POST 请求（提交数据）
常用于向后端提交数据（如表单、新增数据），参数通过 data 配置传递，默认以 JSON 格式发送：
javascript
运行
// 提交 JSON 数据（默认 Content-Type: application/json）
axios.post('/api/user', {name: '张三',age: 25,email: 'zhangsan@example.com'
})
.then(res => console.log('提交成功：', res.data))
.catch(err => console.log('提交失败：', err));
// 提交表单数据（需手动设置 Content-Type）
const formData = new FormData();
formData.append('name', '张三');
formData.append('file', fileObj); // 上传文件
axios.post('/api/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' } // 表单数据格式
})
.then(res => console.log('文件上传成功'))
.catch(err => console.log('上传失败'));（3）其他请求方法
Axios 支持 HTTP 标准的所有请求方法，用法与 GET/POST 类似：
axios.put(url, data, config)：更新数据（全量更新）；axios.delete(url, config)：删除数据；axios.patch(url, data, config)：更新数据（部分更新）；axios.head(url, config)：仅获取响应头，无响应体；axios.options(url, config)：获取目标 URL 支持的请求方法。
（4）配置式请求（通用方式）
所有请求都可通过 axios(config) 统一配置，适用于需要自定义较多参数的场景：
javascript
运行
axios({method: 'post', // 请求方法（get/post/put/delete 等）url: '/api/user', // 请求地址params: { type: 'admin' }, // URL 参数（拼接在 URL 后）data: { name: '张三', age: 25 }, // 请求体数据（POST/PUT 等用）headers: { 'Authorization': 'Bearer ' + token }, // 自定义请求头timeout: 5000 // 请求超时时间（毫秒），超过则报错
})
.then(res => console.log(res.data))
.catch(err => console.log(err));三、Axios 核心特性：拦截器
拦截器是 Axios 的 “灵魂功能”，可以在 请求发送前 或 响应返回后 统一处理逻辑，避免重复代码。常见场景：添加 token、统一错误提示、加载状态管理等。
Axios 提供两种拦截器：请求拦截器（request）和 响应拦截器（response）。
1. 请求拦截器
在请求发送到后端前执行，可用于：
- 统一添加请求头（如 token、Content-Type）；
- 对请求参数进行加密处理；
- 显示加载状态（如弹窗 “加载中”）。
javascript
运行
// 添加请求拦截器
axios.interceptors.request.use(// 拦截成功（请求发送前执行）config => {// 1. 统一添加 token（登录后从本地存储获取）const token = localStorage.getItem('token');if (token) {config.headers.Authorization = 'Bearer ' + token;}// 2. 统一设置请求超时时间config.timeout = 10000;// 3. 显示加载状态（如调用 UI 库的 loading 组件）// Loading.show();return config; // 必须返回 config，否则请求会中断},// 拦截失败（请求配置错误时执行）error => {// 隐藏加载状态// Loading.hide();return Promise.reject(error); // 传递错误，供 catch 捕获}
);2. 响应拦截器
在后端响应返回给前端后、业务代码处理前执行，可用于：
- 统一处理错误（如 token 过期、权限不足）；
- 过滤响应数据（只返回需要的
data字段）； - 隐藏加载状态。
javascript
运行
// 添加响应拦截器
axios.interceptors.response.use(// 拦截成功（响应状态码 2xx 时执行）response => {// 1. 隐藏加载状态// Loading.hide();// 2. 过滤数据：直接返回响应体的 data 字段，简化业务代码return response.data;},// 拦截失败（响应状态码非 2xx 或网络错误时执行）error => {// 1. 隐藏加载状态// Loading.hide();// 2. 统一错误处理if (error.response) {// 有响应体（状态码 4xx/5xx）const status = error.response.status;switch (status) {case 401: // 未登录或 token 过期alert('登录已过期，请重新登录');localStorage.removeItem('token'); // 清除无效 tokenwindow.location.href = '/login'; // 跳转到登录页break;case 403: // 权限不足alert('您没有权限执行此操作');break;case 500: // 服务器错误alert('服务器繁忙，请稍后再试');break;default:alert('请求失败：' + error.response.data.message);}} else if (error.request) {// 无响应体（网络错误、超时等）alert('网络异常，请检查网络连接');}return Promise.reject(error); // 传递错误，供业务代码捕获}
);3. 移除拦截器
如果需要临时禁用拦截器，可通过拦截器实例移除：
javascript
运行
// 1. 保存拦截器实例
const requestInterceptor = axios.interceptors.request.use(config => config);
// 2. 移除拦截器
axios.interceptors.request.eject(requestInterceptor);四、Axios 高级用法
1. 创建自定义 Axios 实例
在大型项目中，不同模块可能需要不同的请求配置（如不同的基础 URL、超时时间），此时可通过 axios.create() 创建自定义实例，避免全局配置冲突。
javascript
运行
// 创建自定义实例（例如：用于“用户模块”的请求）
const userAxios = axios.create({baseURL: 'https://api.example.com/user', // 基础 URL，请求时会自动拼接timeout: 15000, // 超时时间 15 秒headers: { 'Content-Type': 'application/json' } // 默认请求头
});
// 使用自定义实例发送请求（URL 只需写相对路径）
userAxios.get('/info') // 最终请求地址：https://api.example.com/user/info
.then(res => console.log(res))
.catch(err => console.log(err));
// 为自定义实例添加专属拦截器
userAxios.interceptors.response.use(res => res.data,err => {alert('用户模块请求失败：' + err.message);return Promise.reject(err);}
);2. 取消请求
在某些场景下（如用户快速切换页面、重复点击按钮），需要取消未完成的请求，避免无效数据返回。Axios 提供 CancelToken 实现请求取消。
方式 1：使用 CancelToken.source()（推荐）
javascript
运行
// 1. 创建取消令牌源
const source = axios.CancelToken.source();
// 2. 发送请求时关联取消令牌
axios.get('/api/data', {cancelToken: source.token // 将令牌绑定到请求
})
.then(res => console.log(res))
.catch(err => {// 3. 判断是否为取消请求的错误if (axios.isCancel(err)) {console.log('请求已取消：', err.message);} else {console.log('请求失败：', err);}
});
// 4. 取消请求（可在需要时调用，如页面卸载、按钮点击）
source.cancel('用户主动取消请求');方式 2：使用 CancelToken 构造函数
javascript
运行
let cancel; // 存储取消函数
axios.get('/api/data', {cancelToken: new axios.CancelToken(function executor(c) {cancel = c; // 将取消函数赋值给外部变量})
})
.then(res => console.log(res))
.catch(err => {if (axios.isCancel(err)) {console.log('请求已取消');}
});
// 取消请求
cancel('取消请求');3. 并发请求处理
当需要同时发送多个请求，且所有请求完成后再处理逻辑时，可使用 axios.all() 和 axios.spread()（或 Promise.all()）。
javascript
运行
// 1. 定义两个请求
const request1 = axios.get('/api/user/123');
const request2 = axios.get('/api/user/456');
// 2. 并发执行，所有请求完成后触发
axios.all([request1, request2]).then(axios.spread((res1, res2) => {// 分别获取两个请求的响应console.log('用户1数据：', res1.data);console.log('用户2数据：', res2.data);})).catch(err => {console.log('至少一个请求失败：', err);});
// 也可使用原生 Promise.all()（更通用）
Promise.all([request1, request2]).then(([res1, res2]) => {console.log('用户1数据：', res1.data);console.log('用户2数据：', res2.data);}).catch(err => console.log(err));五、常见问题与解决方案
1. 跨域问题
现象：浏览器控制台报错 Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy。
解决方案：
- 后端配置 CORS（核心方案）：在响应头中添加
Access-Control-Allow-Origin、Access-Control-Allow-Methods等字段； - 前端使用代理：在 Vue/React 项目中配置
devServer.proxy（开发环境），将请求代理到后端地址，避免跨域。
示例（Vue 3 代理配置）：
javascript
运行
// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'https://api.example.com', // 后端真实地址changeOrigin: true, // 开启跨域代理pathRewrite: { '^/api': '' } // 重写路径（可选，根据后端接口调整）}}}
};2. token 过期处理
现象：请求返回 401 状态码，提示 “token 过期”。
解决方案：
- 在响应拦截器中捕获 401 错误，清除本地 token，跳转到登录页；
- 进阶方案：使用 “刷新令牌（refresh token）”，当 access token 过期时，自动请求新的 token，再重试原请求。
3. 请求超时处理
现象：请求超过设定时间未响应，报错 timeout of xxx ms exceeded。
解决方案：
- 全局或实例配置
timeout（如timeout: 10000，单位毫秒）； - 在响应拦截器中捕获超时错误，提示用户 “网络繁忙，请稍后再试”。
六、总结
Axios 作为前端请求库的 “标杆”，其简洁的 API 和强大的功能（拦截器、取消请求、并发处理）极大地提升了开发效率。掌握它的核心用法（基础请求、拦截器、自定义实例），并能解决跨域、token 过期等常见问题，是前端开发者的必备技能。
无论是小型项目的简单请求，还是大型项目的复杂交互，Axios 都能满足需求。希望本文能帮助你彻底吃透 Axios，让数据交互环节更高效、更稳健！