如何在响应拦截器中获取请求的接口
在前端开发中，我们经常会使用axios库来发送HTTP请求。axios是一个基于Promise的HTTP库，可以在浏览器和Node.js中发起请求。它提供了一种方便的方式来与后端服务器进行数据交互。而在某些情况下，我们可能需要在响应拦截器中获取请求的接口，以便进行下一步的处理。本文将介绍如何在axios的响应拦截器中获取请求的接口，并提供一个示例来解决一个实际问题。
问题描述
假设我们正在开发一个基于axios的HTTP请求封装库，我们希望在每次请求的响应拦截器中获取请求的接口，以便在接口返回数据时进行一些通用的处理，例如打印日志、统计请求耗时等。但是在axios的响应拦截器中，并没有提供直接获取请求接口的方法。
解决方案
要解决这个问题，我们可以利用axios的请求拦截器来在发送请求之前把请求的接口保存下来，然后在响应拦截器中获取并使用。
我们可以在请求拦截器中将请求的接口保存在请求的配置对象中，然后在响应拦截器中通过response.config来获取请求的接口。下面是一个使用axios的请求拦截器和响应拦截器的示例代码：
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: '
});
// 请求拦截器
instance.interceptors.request.use(config => {
// 在请求发送之前保存请求的接口
config.interface = config.url;
return config;
}, error => {
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
// 在响应拦截器中获取请求的接口
const interface = response.config.interface;
console.log(`请求接口：${interface}`);
console.log(`返回数据：${JSON.stringify(response.data)}`);
return response;
}, error => {
return Promise.reject(error);
});
// 发送请求
instance.get('/users')
.then(response => {
// 处理返回数据
})
.catch(error => {
// 处理请求错误
});
上述代码中，我们首先创建了一个axios实例，并通过baseURL指定了请求的基础URL。然后我们在请求拦截器中保存了请求的接口到请求的配置对象中，这样在响应拦截器中就可以通过response.config.interface来获取请求的接口了。
在响应拦截器中，我们使用了console.log打印了请求的接口和返回的数据。你可以根据需要进行处理，例如记录日志、统计请求耗时等。
使用上述方法，我们就可以在axios的响应拦截器中获取请求的接口了，并进行下一步的处理。
示例应用
假设我们正在开发一个购物车功能，我们希望在每次请求商品列表的接口后，将返回的商品数据加入购物车中。我们可以利用axios的响应拦截器，在获取商品列表的接口后，将返回的商品数据加入购物车。
下面是一个示例代码：
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: '
});
// 购物车对象
const cart = {
items: [],
add(item) {
this.items.push(item);
console.log(`商品已加入购物车：${item.name}`);
},
};
// 响应拦截器
instance.interceptors.response.use(response => {
// 获取请求的接口
const interface = response.config.interface;
if (interface === '/products') {
// 将返回的商品数据加入购物车
response.data.forEach(product => {
cart.add(product);
});
}
return response;
}, error => {
return Promise.reject(error);
});
// 发送请求获取商品列表
instance.get('/products')
.then(response => {
// 处理返回的商品列表
})
.catch(error => {
// 处理请求错误
});
上述代码中，我们首先创建了
