Vue.js Ajax(axios)

在 Vue.js 中，Axios是最常用的 HTTP 客户端库，用于发送 Ajax 请求。它基于 Promise，支持浏览器和 Node.js，具有拦截器、自动转换 JSON、取消请求等强大功能。

一、安装

npminstallaxios# 或yarnaddaxios

二、基础用法

1. 在组件中直接发送请求

<template> <div> <button @click="fetchData">加载数据</button> <ul v-if="list"> <li v-for="item in list" :key="item.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; } }; </script>

2. 常用请求方法

// GETaxios.get('/user?id=123').then(response=>console.log(response.data));// GET (带 params)axios.get('/user',{params:{id:123}}).then(response=>console.log(response.data));// POSTaxios.post('/user',{name:'Tom',age:20}).then(response=>console.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.jsimportaxiosfrom'axios';constrequest=axios.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.jsimportaxiosfrom'axios';import{ElMessage}from'element-plus';// 假设使用 Element Plusconstrequest=axios.create({baseURL:'/api',timeout:5000,});// 请求拦截器：发送前处理request.interceptors.request.use((config)=>{// 1. 添加 Tokenconsttoken=localStorage.getItem('token');if(token){config.headers.Authorization=`Bearer${token}`;}// 2. 处理 GET 请求的 paramsif(config.method==='get'){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(code===200){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(); }); </script>

2. 使用 CancelToken（旧版，Vue 2 常用）

constCancelToken=axios.CancelToken;constsource=CancelToken.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 差异

八、总结

核心流程：

1. 安装 Axios。
2. 创建自定义实例（配置 baseURL、timeout）。
3. 添加拦截器（统一处理 Token、错误）。
4. 封装 API 模块（按业务拆分）。
5. 在组件中调用 API。

Axios 是 Vue 项目处理网络请求的事实标准，配合拦截器和模块化封装，可以极大提升开发效率和代码可维护性。