axios设置前置拦截器

原创

mob64ca12f8a724 2024-01-04 12:21:49 ©著作权

文章标签 ios 拦截器 ci 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f8a724的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios设置前置拦截器

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以发送异步请求，并以简单、易于使用的方式与后端API进行通信。Axios还提供了一些强大的功能，如拦截器，可以在请求和响应之间添加自定义的中间件。

在本篇文章中，我们将重点介绍如何使用Axios设置前置拦截器。前置拦截器允许我们在发送请求之前修改请求的配置或添加自定义的处理逻辑。

安装和基本用法

我们首先需要安装Axios。可以使用npm或yarn进行安装：

npm install axios

或

yarn add axios

安装完成后，我们可以使用Axios发送HTTP请求。以下是一个基本的示例，发送一个GET请求：

const axios = require('axios');

axios.get('
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在上面的代码中，我们使用axios.get方法发送了一个GET请求到`

设置前置拦截器

在Axios中，我们可以使用axios.interceptors.request.use方法设置前置拦截器。前置拦截器是一个函数，它会在发送请求之前被调用，允许我们修改请求的配置。

以下是一个示例，设置一个前置拦截器，添加一个请求头：

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers['Authorization'] = 'Bearer ' + getToken();
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

在上面的代码中，我们使用axios.interceptors.request.use方法设置了一个前置拦截器。这个拦截器会在发送请求之前被调用，并在请求配置中添加一个名为'Authorization'的请求头，值为我们从getToken函数中获取到的token。

序列图

下面是一个使用Axios设置前置拦截器的序列图：

sequenceDiagram
  participant Client
  participant Axios
  participant Interceptor

  Client->>+Axios: 发送请求
  Axios->>+Interceptor: 调用前置拦截器
  Interceptor->>+Axios: 返回修改后的配置
  Axios->>-Client: 发送请求
  Client->>+Axios: 处理响应
  Axios->>+Interceptor: 调用后置拦截器
  Interceptor->>-Axios: 返回响应
  Axios->>-Client: 返回响应

在上面的序列图中，Client发送请求到Axios，Axios调用前置拦截器Interceptor，Interceptor返回修改后的配置给Axios，Axios发送请求给服务器，处理响应后再调用后置拦截器Interceptor，最后返回响应给Client。