Typescript 封装 Axios拦截器方法实例

请看下面的详细讲解。

Typescript 封装 Axios拦截器方法实例

本文将介绍如何使用 Typescript 封装 Axios 拦截器方法，让 Axios 在实际使用过程中具备更好的扩展性和可维护性。

为什么需要封装 Axios 拦截器方法？

Axios 是一个功能强大、易于使用的 HTTP 请求库，但在实际使用过程中，我们经常会遇到一些通用的问题，例如处理请求超时、请求错误，添加公共请求头等。为了便于复用和维护，我们需要将这些通用操作封装到一个统一的地方，使得使用起来更加简单和方便。

实现过程

1. 安装 Axios 和 Typescript

首先，我们需要安装 Axios 和 Typescript：

npm install axios typescript

2. 创建拦截器方法

拦截器方法是指 Axios 在请求或响应过程中所调用的一组函数。我们可以将这些函数封装到一个统一的地方，比如一个类或者一个函数。

以下是一个简单的 Axios 拦截器方法的实例：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

class AxiosInterceptor {
  private axiosInstance: AxiosInstance;

  constructor(baseURL: string, timeout = 3000) {
    this.axiosInstance = axios.create({
      baseURL,
      timeout,
    });

    // 添加请求拦截器
    this.axiosInstance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 在发送请求之前做些什么，比如添加公共请求头等
        config.headers.Authorization = 'Bearer ' + 'your_token';
        return config;
      },
      (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );

    // 添加响应拦截器
    this.axiosInstance.interceptors.response.use(
      (response: AxiosResponse) => {
        // 对响应数据做点什么
        return response;
      },
      (error) => {
        // 对响应错误做点什么
        return Promise.reject(error);
      }
    );
  }

  // get 请求方法封装
  async get<T>(url: string, params?: object): Promise<T> {
    const result = await this.axiosInstance.get<T>(url, { params });
    return result.data;
  }

  // post 请求方法封装
  async post<T>(url: string, data?: object): Promise<T> {
    const result = await this.axiosInstance.post<T>(url, data);
    return result.data;
  }
}

export default AxiosInterceptor;

在上面的代码中，我们使用了 Axios.create() 方法创建了一个 Axios 实例，并在构造函数中为该实例添加了请求拦截器和响应拦截器。

请求拦截器用于在发送请求之前做一些通用的操作，例如添加公共请求头，对请求错误进行处理等。响应拦截器用于对响应数据进行统一的处理和错误处理。

在上面的代码中，我们添加了 get() 和 post() 方法用于发起 GET 和 POST 请求，这样我们在实际使用过程中就不需要再次进行 Axios 的一些基本配置了。我们只需要使用这些方法，并传递对应的参数即可。

3. 使用拦截器方法

接下来，我们可以使用上面定义好的拦截器方法来发起 HTTP 请求。以下是两个使用示例：

import AxiosInterceptor from './axiosInterceptor';

// 创建 AxiosInterceptor 实例
const axiosInterceptor = new AxiosInterceptor('https://api.example.com');

// 发起 GET 请求
axiosInterceptor.get('/users', { limit: 10, offset: 0 }).then((data) => {
  console.log(data);
});

// 发起 POST 请求
axiosInterceptor.post('/users', { name: 'John Doe' }).then((data) => {
  console.log(data);
});

在上面的代码中，我们首先创建了一个 AxiosInterceptor 实例，并指定了 API 的基础 URL。然后，我们使用实例的 get() 和 post() 方法来发起 GET 和 POST 请求，并在回调函数中处理返回的数据。

总结

通过以上实例，我们介绍了如何使用 Typescript 封装 Axios 拦截器方法。通过集中管理和维护拦截器，我们可以将一些通用的问题封装到一个统一的地方，使得使用起来更加简单和方便。