Axios封装秘籍：深入剖析TypeScript版

前端

2024-02-16 03:52:39

揭开Axios封装之谜

在现代前端开发中，HTTP请求已成为不可或缺的一部分，而Axios作为一款优秀的HTTP客户端库，深受开发者的喜爱。为了进一步提升开发效率，对Axios进行封装至关重要。

封装思路

Axios的封装思路主要分为以下几个步骤：

创建一个HTTP类，作为封装的基石；
添加GET、POST、PATCH、DELETE等HTTP方法；
配置拦截器，处理请求和响应的全局逻辑。

实现细节

创建Http类

import axios from "axios";

class Http {
  // 这里省略了构造函数和一些成员变量
}

添加HTTP方法

class Http {
  // 省略其他代码

  get(url: string, params?: any): Promise<any> {
    return axios.get(url, { params });
  }

  post(url: string, data?: any): Promise<any> {
    return axios.post(url, data);
  }

  // 省略其他方法
}

配置拦截器

class Http {
  // 省略其他代码

  constructor() {
    // 添加请求拦截器
    axios.interceptors.request.use((config) => {
      // 处理请求前的逻辑
      return config;
    });

    // 添加响应拦截器
    axios.interceptors.response.use((response) => {
      // 处理响应后的逻辑
      return response;
    });
  }
}

GET、POST、PATCH、DELETE方法

封装后的Axios提供了常用的GET、POST、PATCH、DELETE方法，用法如下：

const http = new Http();

// GET请求
http.get("/users").then((res) => {
  console.log(res.data);
});

// POST请求
http.post("/users", { name: "John" }).then((res) => {
  console.log(res.data);
});

// PATCH请求
http.patch("/users/1", { name: "Jane" }).then((res) => {
  console.log(res.data);
});

// DELETE请求
http.delete("/users/1").then(() => {
  console.log("删除成功");
});