如何使用 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 方法能够捕获到错误。

标签 , ,

发表回复