• 如何基于TypeScript对axios进行封装?
  • 发布于 2个月前
  • 88 热度
    0 评论
随着前后端分离的开发模式越来越流行,前端需要通过ajax或fetch等技术与后端进行数据交互,而在这些技术中,axios被广泛应用并得到了很好的反馈。但是,直接使用原生的axios在大型项目中可能存在重复和复杂度高的问题,因此有必要对它进行封装,同时,自动生成api也可以帮助我们节省开发时间和减少错误,本文将介绍基于TypeScript对axios的封装和api的自动生成。

1. 安装和引入axios
我们首先需要安装axios并在项目中引入它,可以使用以下命令进行安装:
npm install axios --save
接下来,我们在需要使用的文件中引入axios:
import axios from "axios";
2. 封装基础请求类
我们需要在axios的基础上进行进一步封装来达到定制化需求,我们可以创建一个基础请求类将公共的请求操作进行封装。
import axios from "axios";

class BaseRequest {
  private axiosInstance;

  constructor() {
    this.axiosInstance = axios.create({
      baseURL: "http://localhost:3000", // 后端接口地址
      timeout: 10000, // 请求超时时间
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
    });
  }

  async GET(url: string, params?: any) {
    return await this.request("GET", url, params);
  }

  async POST(url: string, data: any) {
    return await this.request("POST", url, data);
  }

  async PUT(url: string, data: any) {
    return await this.request("PUT", url, data);
  }

  async DELETE(url: string, params?: any) {
    return await this.request("DELETE", url, params);
  }

  async request(method: string, url: string, data: any) {
    try {
      const response = await this.axiosInstance.request({
        method,
        url,
        data,
      });
      const res = response.data;
      return res;
    } catch (error) {
      console.error("request error:", error);
      throw error;
    }
  }
}

export default BaseRequest;
在此示例中,我们创建一个BaseRequest类,它具有基本的GET、POST、PUT和DELETE请求方法,这些方法调用request方法来创建axios请求。我们将axios实例化为axiosInstance,并传递一些设置。然后,我们定义了一个request方法来处理所有类型的请求。在这里,我们使用try-catch块来捕获异常,并将响应数据返回给调用者。

3. 封装具体请求类
我们将基于BaseRequest类创建具体的请求类来执行特定类型的请求并获取响应进行处理。以下是一个示例类:
import BaseRequest from "./BaseRequest";

class UserRequest extends BaseRequest {
  async getUserInfo(userId: string) {
    const url = `/user/info/${userId}`;
    const data = await this.GET(url);
    return data;
  }

  async updateUserAvatar(userId: string, formData: FormData) {
    const url = `/user/avatar/${userId}`;
    const data = await this.POST(url, formData);
    return data;
  }
}

export default UserRequest;
在此示例中,我们创建了UserRequest类,并定义了getUserInfo和updateUserAvatar两个方法来处理getUserInfo和updateUserAvatar请求。这些方法使用BaseRequest类的相应方法来生成请求,并返回响应数据。

4. 自动化生成API
手动编写每个请求函数并不是一个明智的选择,我们可以通过node脚本自动生成一整套对应的api文件,来将重复操作降到最小。我们可以定义一个API自动生成的代码模板,并在执行脚本时插入变量来生成对应的代码。以下是自动生成api文件的示例代码:
const fs = require("fs");
const path = require("path");

const apiTemplate = `import BaseRequest from "../BaseRequest";

class ##className## extends BaseRequest {
##methods##
}

export default ##className##;
`;

const methodTemplate = `  async ##apiName##(##params##) {
    const url = `##url##`;
    const data = await this.##method##(url, ##data##);
    return data;
  }`;

const apiConfig = [
  {
    className: "UserRequest",
    modules: [
      {
        apiName: "getUserInfo",
        url: "/user/info/:userId",
        method: "GET",
        params: "userId",
        data: "",
      },
      {
        apiName: "updateUserAvatar",
        url: "/user/avatar/:userId",
        method: "POST",
        params: "userId, formData",
        data: "formData",
      },
    ],
  },
];

apiConfig.forEach((config) => {
  let fileContent = apiTemplate.replace("##className##", config.className);
  let methods = "";
  config.modules.forEach((api) => {
    let methodContent = methodTemplate
      .replace("##apiName##", api.apiName)
      .replace("##url##", api.url)
      .replace("##method##", api.method)
      .replace("##params##", api.params)
      .replace("##data##", api.data);
    methods += methodContent + "\n";
  });
  fileContent = fileContent.replace("##methods##", methods);

  const filePath = path.join(__dirname, `${config.className}.ts`);
  fs.writeFileSync(filePath, fileContent);
});
在此示例中,我们首先定义了代码的两个模板:apiTemplate和methodTemplate。然后,我们定义了一个apiConfig数组,其中包含我们将要生成的API信息。后续的代码会遍历apiConfig数组,并使用apiTemplate和methodTemplate来生成具体的代码文件。相应的代码文件中就定义了我们的请求方法和相关的请求url、请求数据和请求方式。

5. 总结
在本文中,我们基于TypeScript对axios进行了封装,使得我们可以方便地进行请求操作并处理响应数据。我们还展示了如何通过自动生成api的方式来减少代码的重复和降低出错的概率。封装axios和自动生成api是大型项目中的一种好的实践,可以提高项目的可读性和重用性,同时也有助于快速开发和迭代。
用户评论