史上最全Axios二次封装实战教程，新手入门必备！

前端

2022-12-01 23:51:42

Axios 二次封装：提升 HTTP 请求的效率和灵活性

1. Axios简介

Axios 是一个广受欢迎的基于 Promise 的 HTTP 客户端，适用于浏览器和 Node.js 环境。它以简洁、高效和易用性著称，简化了 HTTP 请求的处理过程。

2. 二次封装的必要性

虽然 Axios 非常强大，但它也存在一些局限性，例如：

无法自动转换请求和响应的数据格式
无法自动处理请求超时
无法自动重试失败的请求

3. 二次封装解决方案

为了解决这些问题，我们可以对 Axios 进行二次封装。二次封装后的 Axios 可以提供更强大的功能，包括：

自动转换请求和响应的数据格式
自动处理请求超时
自动重试失败的请求
支持使用拦截器对请求和响应进行自定义处理

4. 二次封装实战

下面是使用 TypeScript 对 Axios 进行二次封装的实战教程：

安装依赖项

npm install axios typescript --save

创建 TypeScript 项目

mkdir axios-typescript-封装
cd axios-typescript-封装
npm init -y

创建 Axios 二次封装文件

touch axios-二次封装.ts

编写二次封装代码

在 axios-二次封装.ts 文件中，添加以下代码：

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

export class Axios二次封装 {
  private axiosInstance: axios.AxiosInstance;

  constructor(config: AxiosRequestConfig) {
    this.axiosInstance = axios.create(config);
  }

  get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.get(url, config);
  }

  post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.post(url, data, config);
  }

  put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.put(url, data, config);
  }

  delete<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.delete(url, config);
  }

  request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.axiosInstance.request(config);
  }
}

在项目中使用

在项目中使用二次封装的 Axios 非常简单：

import { Axios二次封装 } from './axios-二次封装';

const axios二次封装 = new Axios二次封装({
  baseURL: 'http://localhost:3000'
});

axios二次封装.get('/api/users').then(res => {
  console.log(res.data);
});