1. Axios 基础入门现代前端开发的 HTTP 利器作为前端开发者我们每天都要与后端 API 打交道。记得我刚入行时还在用原生的 XMLHttpRequest写一个简单的 GET 请求都要十几行代码。直到遇到 Axios这个基于 Promise 的 HTTP 客户端彻底改变了我的开发体验。它不仅支持浏览器和 Node.js 双环境还提供了拦截器、自动转换 JSON 数据等开箱即用的功能。今天我就结合 6 年实战经验带大家系统掌握 Axios 的核心用法。2. 核心功能解析2.1 安装与基础配置在项目中使用 Axios 的第一步当然是安装。对于现代前端项目我们通常使用 npm 或 yarnnpm install axios # 或 yarn add axios基础使用非常简单导入后即可发起请求import axios from axios; axios.get(https://api.example.com/users) .then(response { console.log(response.data); }) .catch(error { console.error(请求失败:, error); });提示在大型项目中建议创建 axios 实例而不是直接使用全局 axios这样可以避免配置污染2.2 请求方法全解Axios 支持所有 HTTP 方法最常用的有GET获取资源axios.get(/user, { params: { ID: 12345 } })POST创建资源axios.post(/user, { firstName: Fred, lastName: Flintstone })PUT/PATCH更新资源axios.put(/user/123, { firstName: Fred, lastName: Flintstone })DELETE删除资源axios.delete(/user/123)经验PUT 通常用于替换整个资源而 PATCH 用于部分更新这是很多新手容易混淆的点3. 高级功能实战3.1 拦截器机制拦截器是 Axios 最强大的功能之一允许我们在请求和响应被处理前进行拦截// 添加请求拦截器 axios.interceptors.request.use(config { // 在发送请求前做些什么 config.headers.Authorization Bearer ${token}; return config; }, error { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(response { // 对响应数据做点什么 return response.data; // 直接返回data简化后续处理 }, error { // 对响应错误做点什么 if (error.response.status 401) { // 处理未授权情况 } return Promise.reject(error); });3.2 并发请求处理当需要同时发起多个请求时可以使用axios.all和axios.spreadfunction getUserAccount() { return axios.get(/user/12345); } function getUserPermissions() { return axios.get(/user/12345/permissions); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread((acct, perms) { // 两个请求都完成后执行 console.log(acct.data, perms.data); }));4. 最佳实践与常见问题4.1 创建实例与默认配置在实际项目中建议创建 axios 实例并配置默认值const apiClient axios.create({ baseURL: https://api.example.com, timeout: 1000, headers: {X-Custom-Header: foobar} }); // 然后在整个应用中使用这个实例 apiClient.get(/users);4.2 错误处理进阶完善的错误处理是健壮应用的关键axios.get(/user/12345) .catch(error { if (error.response) { // 服务器返回了非2xx的响应 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 请求已发出但没有收到响应 console.log(error.request); } else { // 设置请求时出错 console.log(Error, error.message); } console.log(error.config); });4.3 取消请求在某些场景下如组件卸载时我们需要取消正在进行的请求const CancelToken axios.CancelToken; const source CancelToken.source(); axios.get(/user/12345, { cancelToken: source.token }).catch(thrown { if (axios.isCancel(thrown)) { console.log(请求已取消, thrown.message); } else { // 处理其他错误 } }); // 取消请求 source.cancel(用户取消了操作);5. 性能优化技巧5.1 请求去重对于相同的请求可以使用缓存策略避免重复请求const pendingRequests new Map(); axios.interceptors.request.use(config { const requestKey ${config.method}-${config.url}; if (pendingRequests.has(requestKey)) { return Promise.reject(new axios.Cancel(重复请求)); } pendingRequests.set(requestKey, true); config.cancelToken new axios.CancelToken(cancel { config.cancel cancel; }); return config; }); axios.interceptors.response.use(response { const requestKey ${response.config.method}-${response.config.url}; pendingRequests.delete(requestKey); return response; }, error { if (axios.isCancel(error)) { return Promise.reject(error); } const requestKey ${error.config.method}-${error.config.url}; pendingRequests.delete(requestKey); return Promise.reject(error); });5.2 文件上传进度处理大文件上传时进度反馈很重要const config { onUploadProgress: progressEvent { const percentCompleted Math.round( (progressEvent.loaded * 100) / progressEvent.total ); console.log(${percentCompleted}%); } }; axios.put(/upload, file, config);6. 与框架集成6.1 Vue 中使用 Axios在 Vue 项目中通常会将 axios 挂载到 Vue 原型上// main.js import Vue from vue import axios from axios Vue.prototype.$http axios // 组件中使用 this.$http.get(/user)6.2 React 中使用 Axios在 React 中通常在组件挂载时发起请求useEffect(() { const source axios.CancelToken.source(); const fetchData async () { try { const response await axios.get(/user, { cancelToken: source.token }); setData(response.data); } catch (error) { if (axios.isCancel(error)) { console.log(请求已取消); } else { setError(error); } } }; fetchData(); return () { source.cancel(组件卸载取消请求); }; }, []);7. 测试与调试7.1 Mock 请求在开发测试阶段可以使用 axios-mock-adapter 模拟请求import axios from axios; import MockAdapter from axios-mock-adapter; const mock new MockAdapter(axios); mock.onGet(/users).reply(200, { users: [{ id: 1, name: John Smith }] }); // 测试代码 axios.get(/users).then(response { console.log(response.data); // { users: [...] } });7.2 调试技巧在 Chrome 开发者工具中可以通过以下方式调试在 Sources 面板添加 XHR 断点使用 Network 面板查看请求/响应详情在 Console 面板直接调用 axios 方法测试调试技巧在请求拦截器中添加 console.log(config)可以方便地查看所有请求配置8. 安全实践8.1 CSRF 防护与后端配合实现 CSRF 防护axios.defaults.xsrfCookieName csrftoken; axios.defaults.xsrfHeaderName X-CSRFToken;8.2 JWT 认证处理 JWT 认证的典型流程// 请求拦截器 axios.interceptors.request.use(config { const token localStorage.getItem(token); if (token) { config.headers.Authorization Bearer ${token}; } return config; }); // 响应拦截器 axios.interceptors.response.use(response { return response; }, error { if (error.response.status 401) { // 处理token过期 localStorage.removeItem(token); window.location /login; } return Promise.reject(error); });9. 替代方案对比虽然 Axios 很强大但了解其他方案也很重要特性AxiosFetch APIjQuery.ajax浏览器支持需要polyfill现代浏览器所有浏览器Promise支持支持不支持拦截器有无无取消请求支持AbortController支持自动JSON转换支持需要手动处理支持个人建议对于新项目Axios 仍然是综合体验最好的选择特别是需要拦截器功能时10. 实战案例封装企业级请求库最后分享一个我在实际项目中封装的请求库// http.js import axios from axios; const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }); // 请求拦截器 service.interceptors.request.use( config { // 添加token if (store.getters.token) { config.headers[Authorization] Bearer ${store.getters.token}; } return config; }, error { return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response { const res response.data; // 自定义状态码处理 if (res.code ! 200) { // 处理业务错误 return Promise.reject(new Error(res.message || Error)); } else { return res; } }, error { // 处理HTTP错误 return Promise.reject(error); } ); export default service;使用时只需导入这个封装好的模块import http from /utils/http http.get(/user).then(data { // 处理数据 })这种封装方式带来了几个好处统一错误处理逻辑自动携带认证信息基础URL集中管理统一的响应数据结构处理在实际项目中根据业务需求还可以添加请求重试机制接口缓存请求限流更完善的日志记录我在多个项目中采用这种架构显著提高了代码的可维护性和开发效率。特别是在大型项目中统一的请求处理能避免很多重复代码和潜在的错误。
