项目中使用Typescript封装axios

一、什么是 Typescript

Typescript 是JavaScript 的一个超集，它不仅支持JavaScript的语法，还增加了许多新的特性。最重要的是，Typescript 具有类型检查的能力，能在编译时即可检查出代码中的类型错误，提高了代码的可靠性和可维护性。

二、什么是 Axios

Axios 是一个基于Promise 的HTTP 客户端，用于浏览器和 Node.js。它使用封装的 XMLHttpRequests 对象或者浏览器原生的 fetch 进行网络请求，并且提供额外的一些辅助功能。它具有可立即使用的极简主义API，以及在高级用法下完全的定制能力。

三、使用 Typescript 封装 Axios

在项目中使用 Typescript 封装 Axios，主要步骤如下：

1. 安装依赖：通过 npm 安装 axios、@types/axios 和 typescript 依赖包：

npm install axios @types/axios typescript

1. 创建封装的 axios 类和接口文件：

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

interface IAxios {
  request<T = any>(config: AxiosRequestConfig): Promise<T>;
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
}

class Axios {
  private axiosInstance: AxiosInstance;
  constructor() {
    this.axiosInstance = axios.create({ timeout: 10000 });
    this.init();
  }

  // 初始化拦截器
  private init() {
    // 定义请求拦截器
    this.axiosInstance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 可以根据业务需求修改请求头
        return config;
      },
      (error) => {
        return Promise.reject(error);
      }
    );

    // 定义响应拦截器
    this.axiosInstance.interceptors.response.use(
      (response: AxiosResponse) => {
        // 根据后端返回的状态码进行处理，如登录过期、请求失败等
        return response.data;
      },
      (error) => {
        return Promise.reject(error);
      }
    );
  }

  // 封装 axios 请求方法
  public request<T = any>(config: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance
      .request<T>(config)
      .then((res) => res)
      .catch((error) => Promise.reject(error));
  }

  public get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance
      .get<T>(url, config)
      .then((res) => res)
      .catch((error) => Promise.reject(error));
  }

  public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance
      .post<T>(url, data, config)
      .then((res) => res)
      .catch((error) => Promise.reject(error));
  }

  public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance
      .put<T>(url, data, config)
      .then((res) => res)
      .catch((error) => Promise.reject(error));
  }

  public delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.axiosInstance
      .delete<T>(url, config)
      .then((res) => res)
      .catch((error) => Promise.reject(error));
  }
}

export default Axios;
export { IAxios };

以上代码中，首先定义了封装的 axios 类和接口，通过 typescript 的泛型支持来实现返回数据类型的约束。在定义完类之后，我们需要在类里面通过 axios.create 方法来创建 axios 实例，这样我们就可以通过封装好的方法来发送请求了。

其中，init 方法是用于安装拦截器的。

1. 测试接口

这里提供一个简单的示例来测试接口：

import Axios from './Axios';

interface IData {
  name: string;
  age: number;
}

const axios = new Axios();

axios
  .get<IData>('http://example.com/api/data')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

axios
  .post<IData>('http://example.com/api/data', { name: 'Tom', age: 18 })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

这里我们首先导入封装好的 axios 类，并且定义数据接口。然后创建 axios 实例，调用 get 和 post 方法向服务器发送请求，并输出结果。我们可以根据服务器返回的数据类型进行类型约束。

以上就是使用 Typescript 封装 axios 并测试接口的完整攻略。

阅读剩余 66%