【Axios】如何在Vue中使用Axios请求拦截器

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，Golang开发，云原生开发，前后端框架，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S集群搭建与管理，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：前端零基础，实战进阶教学
景天的主页：景天科技苑

Vue中Axios拦截器

在Vue项目中，Axios是一个非常流行的HTTP客户端，用于发送请求和接收响应。Axios拦截器是Axios的一个强大功能，它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截。通过拦截器，你可以添加请求头、处理请求参数、处理错误等。本文将结合实际案例，详细介绍如何在Vue中使用Axios拦截器。

一、安装Axios

首先，你需要在Vue3项目中安装Axios。你可以使用npm或yarn等包管理工具进行安装。

npm install axios

或者

yarn add axios

二、创建Axios实例

在Vue3项目中，通常会在项目的某个地方创建一个Axios实例，并对其进行配置。你可以将Axios实例放在一个单独的文件中，例如src/axios.js。

// src/axios.js
import axios from 'axios';// 创建Axios实例
const axiosInstance = axios.create({baseURL: '// 你的基础URL', // 设置请求的baseURLtimeout: 5000, // 设置请求超时时间
});// 导出Axios实例
export default axiosInstance;

在上面的代码中，我们使用axios.create方法创建了一个Axios实例，并传递了一些配置选项，例如baseURL和timeout。

三、设置请求拦截器

请求拦截器允许你在请求发送之前对请求进行处理。你可以在Axios实例中使用interceptors.request.use方法来添加请求拦截器。

// src/axios.js
import axios from 'axios';// 创建Axios实例
const axiosInstance = axios.create({baseURL: '// 你的基础URL',timeout: 5000,
});// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {// 在发送请求之前做些什么// 例如，添加请求头const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}// 处理请求参数// config.params = {//   ...config.params,//   key: 'value',// };return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 导出Axios实例
export default axiosInstance;

在上面的代码中，我们添加了一个请求拦截器。在拦截器中，我们检查本地存储中是否存在token，如果存在，则将其添加到请求头中。你还可以对请求参数进行处理，例如添加或修改参数。

四、设置响应拦截器

响应拦截器允许你在响应返回之后对响应进行处理。你可以在Axios实例中使用interceptors.response.use方法来添加响应拦截器。

// src/axios.js
import axios from 'axios';// 创建Axios实例
const axiosInstance = axios.create({baseURL: '// 你的基础URL',timeout: 5000,
});// 添加请求拦截器（同上）// 添加响应拦截器
axiosInstance.interceptors.response.use((response) => {// 对响应数据做些什么// 例如，处理响应数据格式// response.data = {//   ...response.data,//   key: 'value',// };return response;},(error) => {// 对响应错误做些什么const { response } = error;if (response) {// 判断错误状态码if (response.status === 400) {// 请求错误} else if (response.status === 401) {// 未授权，请重新登录} else if (response.status === 403) {// 拒绝访问（403）}return Promise.reject(response.data);} else {console.error('网络连接异常，请稍后再试！');}}
);// 导出Axios实例
export default axiosInstance;

在上面的代码中，我们添加了一个响应拦截器。在拦截器中，我们可以对响应数据进行处理，例如修改数据格式。我们还可以根据响应的状态码来处理不同的错误情况。

五、在Vue组件中使用Axios实例

现在，我们已经在项目中创建了Axios实例，并添加了请求和响应拦截器。接下来，我们可以在Vue组件中使用这个Axios实例来发送请求。

<!-- src/components/YourComponent.vue -->
<template><div>数据展示</div>
</template><script>
import axiosInstance from '../axios';export default {name: 'YourComponent',mounted() {axiosInstance.get('/your-endpoint').then(data => {console.log(data);}).catch(error => {console.error('错误:', error);});},
};
</script>

在上面的代码中，我们在Vue组件的mounted生命周期钩子中使用了Axios实例来发送一个GET请求。请求成功后，我们将响应数据打印到控制台。如果请求失败，我们将错误信息打印到控制台。

六、封装请求方法

为了更方便地在项目中发送请求，我们可以将常用的请求方法封装起来。例如，我们可以封装GET和POST请求方法。

// src/api/axios.js
import axios from 'axios';// 创建Axios实例（同上）// 封装GET请求方法
export function getRequest(url, params = {}) {return axiosInstance.get(url, { params });
}// 封装POST请求方法
export function postRequest(url, data = {}) {return axiosInstance.post(url, data);
}

现在，我们可以在Vue组件中使用封装好的请求方法来发送请求。

<!-- src/components/YourComponent.vue -->
<template><div>数据展示</div>
</template><script>
import { getRequest, postRequest } from '../api/axios';export default {name: 'YourComponent',mounted() {// 使用GET请求方法getRequest('/your-get-endpoint', { param1: 'value1' }).then(data => {console.log('GET请求响应:', data);}).catch(error => {console.error('GET请求错误:', error);});// 使用POST请求方法postRequest('/your-post-endpoint', { key: 'value' }).then(data => {console.log('POST请求响应:', data);}).catch(error => {console.error('POST请求错误:', error);});},
};
</script>

七、统一管理API接口

在项目中，我们可能会有很多API接口。为了方便管理和维护，我们可以将这些接口统一管理起来。例如，我们可以在src/api目录下创建一个api.js文件，并在其中定义所有的API接口。

// src/api/api.js
import { getRequest, postRequest } from './axios';// 定义用户相关API接口
export class UserApi {static async login(params) {return postRequest('/login', params);}static async register(params) {return postRequest('/register', params);}static async getUserInfo(params) {return getRequest('/userInfo', params);}
}// 定义书籍相关API接口
export class BookApi {static async getBookList(params) {return getRequest('/bookList', params);}
}

现在，我们可以在Vue组件中使用统一管理好的API接口来发送请求。

<!-- src/components/YourComponent.vue -->
<template><div><button @click="handleLogin">登录</button></div>
</template><script>
import { UserApi } from '../api/api';export default {name: 'YourComponent',methods: {async handleLogin() {const params = {username: 'admin',password: '123456',};try {const response = await UserApi.login(params);console.log('登录成功:', response);} catch (error) {console.error('登录失败:', error);}},},
};
</script>