用typescript封装Taro.request

原创

已于 2023-10-27 20:31:14 修改 · 943 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #前端框架

于 2023-10-27 20:30:15 首次发布

本文介绍用TypeScript封装泰罗的request API函数。该函数用于请求网络服务，常见需求是添加token头。封装扩展了多项功能，如添加content-type头、选择后端服务地址等。实现细节涉及TokenService类，还给出获取图形验证码的使用示例，提高了系统可读性和可维护性。

概要

泰罗的request API函数主要用于请求网络服务，可以发起异步请求服务，使用很方便，许多开发工程师都使用过。在实际项目中，会因为一些需求而去封装或者扩展它，最常见的需求是为请求添加token头。在网络上有好几篇介绍如何封装这个函数的文章，从这些文章中收获了不少。前面几个是javascript版本的封装，缺乏强类型支持，这篇文章主要介绍用typescript封装request函数。

扩展的功能

下面这段代码实现主要添加了如下的几个功能点：

如果请求没有携带content-type头，则添加"application/json;charset=UTF-8"类型
根据程序运行环境，选择相应的后端服务地址
在请求头中加入用户的token令牌
返回值统一为ResultDto类型
对后台返回的业务数据进行校验，提前发现数据不匹配的错误
把后台错误，HTTP错误和未知的系统错误，统一归类到ResultDto的错误中
当遇到后台返回的token无效错误时跳到登录页，这里token无效的错误码是10002

实现细节

import Taro from "@tarojs/taro";
import TokenService from "../token/TokenService";

const jsonHader = "application/json;charset=UTF-8";

function getBaseUrl(): string {
  if (process.env.NODE_ENV === "development") {
    return "http://127.0.0.1:9080";
  } else return "";
}

function exist<T>(a: any, ...attrs: T[]): boolean {
  if (process.env.NODE_ENV === "development") {
    for (let i = 0; i < attrs.length; ++i) {
      let item = attrs[i];
      if (a[item] != "" && !a[item]) {
        return false;
      }
    }
  }
  return true;
}

export const HTTP_STATUS = {
  SUCCESS: 200,
  CREATED: 201,
  ACCEPTED: 202,
  CLIENT_ERROR: 400,
  AUTHENTICATE: