在 Vue.js 中Axios是最常用的 HTTP 客户端库用于发送 Ajax 请求。它基于 Promise支持浏览器和 Node.js具有拦截器、自动转换 JSON、取消请求等强大功能。一、安装npminstallaxios# 或yarnaddaxios二、基础用法1. 在组件中直接发送请求template div button clickfetchData加载数据/button ul v-iflist li v-foritem in list :keyitem.id{{ item.name }}/li /ul /div /template script setup import { ref } from vue; import axios from axios; const list ref(null); const loading ref(false); const fetchData async () { loading.value true; try { const response await axios.get(https://api.example.com/users); list.value response.data; } catch (error) { console.error(请求失败:, error); } finally { loading.value false; } }; /script2. 常用请求方法// GETaxios.get(/user?id123).then(responseconsole.log(response.data));// GET (带 params)axios.get(/user,{params:{id:123}}).then(responseconsole.log(response.data));// POSTaxios.post(/user,{name:Tom,age:20}).then(responseconsole.log(response.data));// PUT / PATCHaxios.put(/user/123,{name:Jerry});axios.patch(/user/123,{age:21});// DELETEaxios.delete(/user/123);// 并发请求axios.all([axios.get(/users),axios.get(/posts)]).then(axios.spread((usersRes,postsRes){console.log(usersRes.data,postsRes.data);}));三、创建 Axios 实例推荐在实际项目中不要直接在组件中import axios而是创建一个自定义实例配置基础 URL、超时、拦截器等。1. 创建实例// src/utils/request.jsimportaxiosfromaxios;constrequestaxios.create({baseURL:process.env.VUE_APP_API_BASE_URL||https://api.example.com,timeout:5000,// 超时时间headers:{Content-Type:application/json,},});exportdefaultrequest;2. 在组件中使用script setup import request from /utils/request; const getUser async () { const res await request.get(/user/123); console.log(res.data); }; /script四、请求与响应拦截器拦截器是 Axios 最强大的功能用于统一处理请求头、错误、Token等。1. 添加拦截器// src/utils/request.jsimportaxiosfromaxios;import{ElMessage}fromelement-plus;// 假设使用 Element Plusconstrequestaxios.create({baseURL:/api,timeout:5000,});// 请求拦截器发送前处理request.interceptors.request.use((config){// 1. 添加 TokenconsttokenlocalStorage.getItem(token);if(token){config.headers.AuthorizationBearer${token};}// 2. 处理 GET 请求的 paramsif(config.methodget){config.params{...config.params,timestamp:Date.now()};}returnconfig;},(error){returnPromise.reject(error);});// 响应拦截器收到响应后处理request.interceptors.response.use((response){// 假设后端统一返回 { code: 200, data: ..., msg: success }const{code,data,msg}response.data;if(code200){returndata;// 直接返回 data组件中无需再解构}else{ElMessage.error(msg||请求失败);returnPromise.reject(newError(msg));}},(error){// 处理 HTTP 状态码错误if(error.response){const{status}error.response;switch(status){case401:ElMessage.error(未登录请重新登录);localStorage.removeItem(token);// 跳转登录页// router.push(/login);break;case403:ElMessage.error(无权限访问);break;case404:ElMessage.error(资源不存在);break;case500:ElMessage.error(服务器错误);break;default:ElMessage.error(网络错误);}}elseif(error.request){// 请求已发送但未收到响应ElMessage.error(网络超时请检查连接);}else{// 请求配置出错ElMessage.error(请求配置错误);}returnPromise.reject(error);});exportdefaultrequest;2. 组件中使用简化script setup import request from /utils/request; const fetchData async () { try { // 拦截器已经处理了 token 和错误这里直接拿到 data const data await request.get(/users); console.log(data); } catch (error) { // 错误已在拦截器中处理这里可选做额外逻辑 } }; /script五、取消请求在组件卸载或用户快速切换时取消未完成的请求避免内存泄漏和状态错乱。1. 使用 AbortController推荐script setup import { ref, onUnmounted } from vue; import axios from axios; const data ref(null); const controller new AbortController(); const fetchData async () { try { const res await axios.get(/users, { signal: controller.signal, // 绑定信号 }); data.value res.data; } catch (error) { if (axios.isCancel(error)) { console.log(请求已取消:, error.message); } else { console.error(请求失败:, error); } } }; // 组件卸载时取消请求 onUnmounted(() { controller.abort(); }); /script2. 使用 CancelToken旧版Vue 2 常用constCancelTokenaxios.CancelToken;constsourceCancelToken.source();axios.get(/users,{cancelToken:source.token}).catch(thrown{if(axios.isCancel(thrown)){console.log(Request canceled,thrown.message);}});// 取消source.cancel(Operation canceled by the user.);六、封装 API 模块最佳实践将 API 请求按模块拆分统一管理。// src/api/user.jsimportrequestfrom/utils/request;exportfunctionlogin(data){returnrequest({url:/auth/login,method:post,data,});}exportfunctiongetUserInfo(){returnrequest({url:/user/info,method:get,});}exportfunctionupdateUser(data){returnrequest({url:/user/update,method:put,data,});}!-- 组件中使用 -- script setup import { login, getUserInfo } from /api/user; const handleLogin async () { const res await login({ username: tom, password: 123 }); console.log(res); }; /script七、Vue 2 vs Vue 3 差异特性Vue 2Vue 3导入方式import axios from axios同上生命周期mounted()onMounted()取消请求CancelTokenAbortController(推荐)响应拦截器同上同上八、总结场景推荐方案简单请求直接axios.get/post项目级请求创建axios.create()实例统一处理 Token/错误请求/响应拦截器取消请求AbortController(Vue 3)代码组织按模块封装 API 文件核心流程安装 Axios。创建自定义实例配置 baseURL、timeout。添加拦截器统一处理 Token、错误。封装 API 模块按业务拆分。在组件中调用 API。Axios 是 Vue 项目处理网络请求的事实标准配合拦截器和模块化封装可以极大提升开发效率和代码可维护性。