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

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

猜你喜欢

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