如何使用TS对axios的进行简单封装

下面我将详细讲解如何使用 TypeScript 对 Axios 进行简单封装。

第一步：安装依赖

我们首先需要安装 axios 和 @types/axios 两个依赖。 @types/axios 是对 axios 这个库的 TypeScript 类型定义文件，我们使用 TypeScript 的时候需要依赖。

npm install axios @types/axios --save

第二步：创建 axios 实例和请求封装类

我们使用 TypeScript 将 axios 请求进行封装，可以在服务端和客户端上使用。

我们先创建一个 axios 实例，并设置默认的配置选项，如下：

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

// 创建 axios 实例
const instance: AxiosInstance = axios.create({
  baseURL: 'https://example.com/api', // 定义接口基础url
  timeout: 10000, // 超时时间
  withCredentials: true, // 跨域请求时是否需要使用凭证
  responseType: 'json', // 服务器响应返回的数据类型
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
  },
});

// 定义封装 axios 请求的类
class Http {
  // 定义接口请求方法
  request<T>(config: AxiosRequestConfig): Promise<T> {
    return new Promise((resolve, reject) => {
      instance(config)
       .then((response: AxiosResponse<T>) => {
         resolve(response.data);
       })
       .catch((error: AxiosError) => {
         reject(error);
       });
    });
  }
}

export default Http;

我们封装了 request 方法，并将响应的数据类型设置为泛型，这样我们在使用的时候就知道返回值的具体数据类型。

第三步：封装接口请求

接下来我们就可以根据不同的业务需求封装请求接口了。

以 get 请求为例，我们在请求前可以进行一些公共的操作，如添加请求头、设置请求参数等。在得到响应后，再进行统一的处理。

import Http from './http';

class DataApi extends Http {
  /**
   * 获取数据列表
   * @returns Promise<any>
   */
  async getList(params: any): Promise<any> {
    try {
      const config = {
        url: '/list',
        method: 'get',
        params,
      };
      // 请求前添加请求头
      this.addHeaders(config);

      const res: any = await this.request(config);

      // 在得到响应后，进行统一的处理
      if (res.code === 0) {
        return res;
      } else {
        throw new Error(res.msg);
      }
    } catch (error) {
      throw error;
    }
  }

  /**
   * 添加请求头
   * @param config 
   * @returns 
   */
  addHeaders(config: AxiosRequestConfig): AxiosRequestConfig {
    config.headers = {
      'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
      ...config.headers,
    };
    return config;
  }
}

export default new DataApi();

第四步：使用封装后的接口

我们在具体的业务代码中使用封装后的接口时，只需要调用封装的方法即可。示例如下：

import dataApi from './api';

async function fetchList() {
  try {
    const res: any = await dataApi.getList({ page: 1, size: 10 });
    console.log(res);
  } catch (error) {
    console.error(error);
  }
}

fetchList();

通过以上步骤，我们就完成了一个最简单的 TS 对 axios 封装的例子。在实际项目开发中，我们可以根据自己的需求，进行更多的功能和处理。