axios 请求前执行

流程

为了实现在 axios 请求前执行某些操作，我们需要了解整个流程。下面的表格展示了整件事情的步骤。

代码实现

创建 Axios 实例

首先，我们需要使用 axios.create() 方法创建一个 Axios 实例。这个实例将拥有自己的配置，例如基本的 URL、默认的 headers 等。

import axios from 'axios';

const instance = axios.create({
  baseURL: '
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

请求拦截器

接下来，我们需要设置一个请求拦截器，它将在发送请求之前执行某些操作。我们可以使用 instance.interceptors.request.use() 方法来添加请求拦截器。

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做一些操作
    console.log('请求拦截器');
    return config;
  },
  (error) => {
    // 处理请求错误
    console.error('请求拦截器错误', error);
    return Promise.reject(error);
  }
);

在上面的代码中，我们使用 config 参数来获取请求配置。我们可以在这里对请求进行修改或添加一些额外的信息。

发送请求

现在，我们可以使用 Axios 实例来发送请求了。使用 instance.get()、instance.post() 等方法发送 GET、POST 等请求。

instance.get('/api/data')
  .then((response) => {
    // 处理成功响应
    console.log('响应数据', response.data);
  })
  .catch((error) => {
    // 处理错误响应
    console.error('请求错误', error);
  });

在上面的示例中，我们发送了一个 GET 请求，并在 then 和 catch 方法中处理成功和失败的响应。

响应拦截器

最后，我们可以设置一个响应拦截器，它将在接收到响应之后执行某些操作。我们可以使用 instance.interceptors.response.use() 方法来添加响应拦截器。

instance.interceptors.response.use(
  (response) => {
    // 在接收到响应之前做一些操作
    console.log('响应拦截器');
    return response;
  },
  (error) => {
    // 处理响应错误
    console.error('响应拦截器错误', error);
    return Promise.reject(error);
  }
);

在上面的代码中，我们使用 response 参数来获取响应数据。我们可以在这里对响应进行修改或添加一些额外的信息。

类图

下面是一个简单的类图，展示了我们在上面代码中使用的类和它们之间的关系。

classDiagram
    class Axios {
        -defaults: object
        -interceptors: object

        +request(config): Promise
        +get(url, config): Promise
        +post(url, data, config): Promise
        +put(url, data, config): Promise
        +delete(url, config): Promise
        +interceptors: InterceptorManager
    }

    class InterceptorManager {
        +use(onFulfilled, onRejected): number
        +eject(id: number): void
    }

    class RequestInterceptor {
        +onFulfilled(config): config
        +onRejected(error): Promise
    }

    class ResponseInterceptor {
        +onFulfilled(response): response
        +onRejected(error): Promise
    }

    Axios "1" o-- "1" InterceptorManager
    InterceptorManager "0..*" o-- "0..*" RequestInterceptor
    InterceptorManager "0..*" o-- "0..*" ResponseInterceptor

以上就是实现 "axios 请求前执行" 的步骤和代码示例