电脑基础 · 2023年3月19日

如何使用 Axios 中的请求拦截器 和响应拦截器

Axios 是一个常用的 JavaScript 库,用于发送 HTTP 请求和处理响应。在网站设计中,我们可以使用 Axios 请求拦截器和响应拦截器来实现一些常见的需求,例如添加认证信息、处理错误信息等。以下是一个简单的例子:

import axios from 'axios';
// 创建一个 Axios 实例
const instance = axios.create({
baseURL: 'https://xxx.example.com',
timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(
function(config) {
// 在请求发送之前做一些自定义操作
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
return config;
},
function(error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function(response) {
// 对响应数据做些什么
return response.data;
},
function(error) {
// 对响应错误做些什么
if (error.response.status === 401) {
// 处理认证错误
}
return Promise.reject(error);
}
);
// 发送 GET 请求
instance.get('/data').then(function(response) {
console.log(response);
});

在这个例子中,我们首先创建了一个 Axios 实例,并使用 create 方法来指定一些默认配置,例如基础 URL 和超时时间。然后,我们添加了一个请求拦截器和一个响应拦截器。

请求拦截器通过 use 方法来添加,其中

  • 第一个函数在请求发送之前执行,可以在这里修改请求配置;

  • 第二个函数在请求错误时执行。

响应拦截器也是通过 use 方法来添加,其中

  • 第一个函数在接收到响应后执行,可以在这里处理响应数据;

  • 第二个函数在接收到响应错误时执行,可以在这里处理错误信息。

最后,我们通过实例来发送 GET 请求,并在 then 方法中处理响应数据。

需要注意的是,Axios 的拦截器是链式调用的,每个拦截器都必须返回一个配置对象或一个 Promise。请求拦截器可以修改请求配置,并通过 return config 将其返回。响应拦截器可以处理响应数据,并通过 return response.data 将处理后的数据返回。如果出现错误,可以通过 return Promise.reject(error) 将错误信息返回,使得后续的 catch 方法能够捕获到错误。