当前位置：首页 > news >正文

vue3中axios添加请求和响应的拦截器

news 2025/8/22 13:20:02

本章主要是以记录为主。

在src创建一个utils文件夹，并在utils中创建一个request.js文件。

// 引入axios
import axios from "axios";
// import qs from "qs";
// 创建axios实例
const instance = axios.create();
// 请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);
// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);
// 导出实例
export default instance;

这段代码主要是使用 axios 来创建一个 HTTP 客户端实例，并添加请求和响应的拦截器。下面是对代码的详细解析：

引入 axios

import axios from "axios";

这一行从 axios 包中引入 axios 对象。axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。

创建 axios 实例

const instance = axios.create();

使用 axios.create() 方法创建一个新的 axios 实例。这样做的好处是，你可以为这个特定的实例添加拦截器、配置默认值等，而不会影响到其他使用 axios 的地方。

请求拦截器

instance.interceptors.request.use( 
function (config) { 
// 在发送请求之前做些什么 
return config; 
}, 
function (error) { 
// 对请求错误做些什么 
return Promise.reject(error); 
} 
);

请求拦截器会在请求被发送之前执行。这里有两个回调函数：

第一个回调函数：接收一个配置对象 config 作为参数。在这个函数里，你可以修改请求的配置（例如添加 headers、params 等），或者直接返回这个配置对象。
第二个回调函数：用于处理请求错误。如果请求在发送之前发生错误（例如因为配置不正确），这个函数会被调用。这里，它只是简单地将错误包装成一个 Promise 并拒绝它。

响应拦截器

instance.interceptors.response.use( 
function (response) { 
// 对响应数据做点什么 
return response.data; 
}, 
function (error) { 
// 对响应错误做点什么 
return Promise.reject(error); 
} 
);

响应拦截器会在响应被处理之前执行。同样，这里也有两个回调函数：

第一个回调函数：接收一个响应对象 response 作为参数。在这个函数里，你可以处理响应数据（例如提取数据、转换数据格式等），并返回处理后的结果。这里，它只是简单地返回响应体（response.data）。
第二个回调函数：用于处理响应错误。如果请求成功发送但服务器返回了错误（例如 404、500 等状态码），这个函数会被调用。这里，它只是简单地将错误包装成一个 Promise 并拒绝它。