axios拦截器
原创
请求拦截器
Axios的请求拦截器允许您在发送请求之前对其进行拦截和修改。您可以使用axios.interceptors.request对象来添加和移除请求拦截器。以下是请求拦截器的使用方法：
添加请求拦截器
要添加请求拦截器，使用axios.interceptors.request.use()方法。此方法接受两个参数：一个成功的回调函数和一个错误的回调函数。在成功的回调函数中，您可以修改请求配置或添加自定义的逻辑。在错误的回调函数中，您可以处理请求错误。以下是一个添加请求拦截器的示例：
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});在上面的示例中，我们使用axios.interceptors.request.use()方法添加了一个请求拦截器。在成功的回调函数中，我们可以修改请求配置并返回修改后的配置。在错误的回调函数中，我们可以处理请求错误并返回一个拒绝的Promise。
移除请求拦截器
如果您需要移除已添加的请求拦截器，可以使用axios.interceptors.request.eject()方法，并传入要移除的拦截器函数。以下是一个移除请求拦截器的示例：
var myInterceptor = axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 移除请求拦截器
axios.interceptors.request.eject(myInterceptor);在上面的示例中，我们首先使用axios.interceptors.request.use()方法添加了一个请求拦截器，并将返回的拦截器函数保存在变量myInterceptor中。然后，我们使用axios.interceptors.request.eject()方法移除该拦截器。
响应拦截器
Axios的响应拦截器允许您在处理响应数据之前对其进行拦截和修改。您可以使用axios.interceptors.response对象来添加和移除响应拦截器。以下是响应拦截器的使用方法：
添加响应拦截器
要添加响应拦截器，使用axios.interceptors.response.use()方法。此方法接受两个参数：一个成功的回调函数和一个错误的回调函数。在成功的回调函数中，您可以对响应数据进行处理或添加自定义的逻辑。在错误的回调函数中，您可以处理响应错误。以下是一个添加响应拦截器的示例：
axios.interceptors.response.use(function (response) {
// 对响应数据做些什么
return response;
}, function (error) {
// 对响应错误做些什么
return Promise.reject(error);
});在上面的示例中，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器。在成功的回调函数中，我们可以对响应数据进行任何必要的处理，并返回修改后的响应。在错误的回调函数中，我们可以处理响应错误并返回一个拒绝的Promise。
移除响应拦截器
如果您需要移除已添加的响应拦截器，可以使用axios.interceptors.response.eject()方法，并传入要移除的拦截器函数。以下是一个移除响应拦截器的示例：
var myInterceptor = axios.interceptors.response.use(function (response) {
// 对响应数据做些什么
return response;
}, function (error) {
// 对响应错误做些什么
return Promise.reject(error);
});
// 移除响应拦截器
axios.interceptors.response.eject(myInterceptor);在上面的示例中，我们首先使用axios.interceptors.response.use()方法添加了一个响应拦截器，并将返回的拦截器函数保存在变量myInterceptor中。然后，我们使用axios.interceptors.response.eject()方法移除该拦截器。
示例
以下是一个完整的示例，展示了如何使用请求和响应拦截器：
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log("请求拦截器：", config);
return config;
}, function (error) {
// 对请求错误做些什么
console.log("请求错误：", error);
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做些什么
console.log("响应拦截器：", response);
return response;
}, function (error) {
// 对响应错误做些什么
console.log("响应错误：", error);
return Promise.reject(error);
});
// 发送请求
axios.get("https://api.example.com/data")
.then(function (response) {
console.log("响应数据：", response.data);
// 在这里处理返回的数据
})
.catch(function (error) {
console.log("请求错误：", error);
// 在这里处理请求错误
});在上面的示例中，我们首先使用axios.interceptors.request.use()方法添加了一个请求拦截器，它会在发送请求之前打印请求配置。然后，我们使用axios.interceptors.response.use()方法添加了一个响应拦截器，它会在收到响应后打印响应数据。最后，我们发送了一个GET请求并处理成功的响应和请求错误。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
