Typescript 封装 Axios拦截器方法实例

Typescript 封装 Axios 拦截器方法实例

在进行项目开发时，经常需要使用到 Axios 进行网络请求操作。Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于浏览器和 Node.js。然而，每次请求都需要写一大串重复的代码来处理请求失败、请求成功等操作，非常繁琐。因此，我们可以通过封装 Axios 拦截器方法来减少代码重复度，提高代码的可维护性和可读性。

下面是一个 Typescript 封装 Axios 拦截器方法的示例：

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

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 请求拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 在请求之前做些什么
    return config;
  },
  (error: any) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

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

export default instance;

在上面的示例中，首先我们创建了一个 Axios 的实例 instance，然后通过 instance.interceptors.request.use() 和 instance.interceptors.response.use() 方法来进行请求拦截和响应拦截。这样，在每次请求数据时，都会自动执行请求拦截器和响应拦截器中定义的方法。

另外，在拦截器中我们可以进行诸如请求头的设置、Loading 状态的显示等操作，从而减少冗余代码。

下面是一个示例，演示了如何使用上述封装的 Axios 实例：

import axiosInstance from 'path/to/axios-instance'

axiosInstance.get('/users/12345')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

通过上述方法，我们可以轻松地封装 Axios 拦截器方法，从而减少代码量，提高代码的可维护性和可读性。