封装Taro请求

流程图

文件目录

⊢ request
  ⨽ http.ts
  ⨽ index.ts
  ⨽ interceptors.ts

使用 Taro.addInterceptor 添加请求/响应拦截器 [interceptors.ts]

import Taro from '@tarojs/taro';
import { post } from '.';

/**
 * 获取 Token
 */
export async function requestToken() {
  let token = Taro.getStorageSync('userToken') || '';

  if (!token) {
    const appid = Taro.getAccountInfoSync().miniProgram.appId;
    const { code } = await Taro.login();

    // 后台换取 Token 的接口
    const {
      data: { data },
    } = await post(
      `user/wxLogin?code=${code}&appId=${appid}`,
      {},
      { isNeedToken: false }
    );

    Taro.setStorageSync('userToken', data);
    token = data;
  }

  /**
   * 如果其他页面通过 Taros.getStorageSync("userToken") 获取不到 token, Taro.setStorageSync() 存储需要一定的时间
   * 可以使用事件监听的方式获取 token, eg: Taro.eventCenter.trigger("userToken", token)
   */

  return token;
}

/**
 * 请求拦截器
 */
async function requestInterceptor(request: Taro.RequestParams) {
  const { header, isNeedToken, isShowLoading } = request;

  if (isShowLoading) Taro.showLoading({ title: '加载中', mask: true });

  if (isNeedToken)
    request.header = { ...header, Authorization: await requestToken() };

  return request;
}

/**
 * 响应拦截器
 */
function responseInterceptor(
  request: Taro.RequestParams,
  response: Taro.request.SuccessCallbackResult
) {
  const { isShowLoading, isShowFailToast, isThrowError } = request;
  const { statusCode, data, errMsg } = response; // HTTP 返回的数据格式

  isShowLoading && Taro.hideLoading();

  if (statusCode === 200) {
    // HTTP 成功
    const { code, msg } = data; // 后端自定义的响应格式

    if (code == 0) {
      // 后端返回的 code == 0 代表请求成功
      return response;
    } else {
      if (isShowFailToast)
        Taro.showToast({
          icon: 'none',
          title: msg || '未知错误，十分抱歉！',
          duration: 2000,
          mask: true,
        });

      if (isThrowError) throw new Error(`后端返回的错误信息-- ${msg}`); // 抛出错误, 阻止程序向下执行

      return response; // 程序继续往下走
    }
  } else {
    // HTTP 失败
    let title = '未知错误，万分抱歉！';

    if (statusCode === -1) title = '网络请求失败，请检查您的网络。';

    if (statusCode > 0)
      title = `url:${request.url.toString()}, statusCode:${
        response.statusCode
      }`;

    if (statusCode == 401) {
      Taro.clearStorage();
      Taro.reLaunch({ url: '/pages/home/index' });
    }

    if (isShowFailToast)
      Taro.showToast({
        icon: 'none',
        title: title || errMsg,
        duration: 2000,
        mask: true,
      });

    throw new Error(`HTTP请求失败---- ${title || errMsg}`); // 抛出错误, 阻止程序向下执行
  }
}

/**
 * 参考官方文档
 * https://taro-docs.jd.com/docs/apis/network/request/addInterceptor
 */
const interceptor = async function (chain: Taro.Chain) {
  const requestParams = chain.requestParams;
  // const { method, data, url } = requestParams;

  // console.log(`http ${method || "GET"} --> ${url} data: `, data);

  let req = await requestInterceptor(requestParams); // 请求拦截器

  return chain.proceed(req).then((res: Taro.request.SuccessCallbackResult) => {
    // console.log(`http <-- ${url} result:`, res);

    return responseInterceptor(req, res); // 响应拦截器
  });
};

export default interceptor;

使用 Taro.request 封装请求 [http.ts]

import Taro from '@tarojs/taro';
import interceptor from './interceptors';

const baseUrl = 'http://127.0.0.1:8081' + '/api';

// Taro 提供了两个内置拦截器
// logInterceptor - 用于打印请求的相关信息
// timeoutInterceptor - 在请求超时时抛出错误。
// const interceptors = [customInterceptor, Taro.interceptors.logInterceptor]

/**
 * 添加拦截器 (务必与 Taro.request 放到一起)
 * https://taro-docs.jd.com/docs/apis/network/request/addInterceptor
 */
Taro.addInterceptor(interceptor);

/** 自定义请求体 */
export interface IRequestData {
  [key: string]: any;
}

/**
 * 自定义响应体 (根据后端的返回的 数据格式 来)
 * 或者: Taro.request.SuccessCallbackResult<T>
 */
export interface IResponseData<T> {
  msg: string;
  data: T;
  code: number;
  total: number;
}

/** 自定义配置 */
export interface IRequestOption
  extends Partial<Taro.request.Option<string | IRequestData>> {
  /**
   * 是否需要Token
   * @default true
   */
  isNeedToken?: boolean;

  /**
   * 是否显示Loading遮罩层
   * @default false
   */
  isShowLoading?: boolean;

  /**
   * 是否显示失败Toast弹框
   * @default false
   */
  isShowFailToast?: boolean;

  /**
   * 是否抛出错误 (阻止代码的继续运行)
   * @default false
   */
  isThrowError?: boolean;
}

/** 封装请求类 */
class HttpRequest {
  customOptions: IRequestOption = {
    isNeedToken: true,
    isShowLoading: false,
    isShowFailToast: false,
    isThrowError: false,
  };

  async request<T>(
    url: string,
    data: string | IRequestData = {},
    options: IRequestOption
  ): Promise<Taro.request.SuccessCallbackResult<IResponseData<T>>> {
    const requestUrl = this.normalizationUrl(url);
    const header = { 'Content-Type': 'application/json' };
    const requestData = data;
    const requestOptions = { ...this.customOptions, ...options };
    const params = {
      url: requestUrl,
      header,
      data: requestData,
      ...requestOptions,
    };

    const resp: any = await Taro.request(params); // 发起请求
    return resp;
  }

  /** 处理 url */
  private normalizationUrl(url: string) {
    let requestUrl = url;

    if (baseUrl[baseUrl.length - 1] === '/') {
      // 判断 baseUrl 最后是否有 '/'
      requestUrl[0] === '/' && (requestUrl = requestUrl.replace('/', '')); // 去除 requestUrl 最前面的 '/'
    } else {
      requestUrl[0] !== '/' && (requestUrl = '/' + requestUrl); // 给 requestUrl 最前面加上 '/'
    }

    if (!/^https{0,1}:\/\//g.test(requestUrl)) {
      // 判断 requestUrl 是否是 http:// 或 https:// 开头
      requestUrl = `${baseUrl}${requestUrl}`;
    }

    return requestUrl;
  }
}

const http = new HttpRequest();
export default http;

抛出 get/post/put/del 方法 [index.ts]

import http, { IRequestData, IRequestOption } from './http';

export function get<T = any>(
  url: string,
  data?: string | IRequestData,
  option: IRequestOption = {}
) {
  return http.request<T>(url, data, { method: 'GET', ...option });
}

export function post<T = any>(
  url: string,
  data?: string | IRequestData,
  option: IRequestOption = {}
) {
  return http.request<T>(url, data, { method: 'POST', ...option });
}

export function put<T = any>(
  url: string,
  data?: string | IRequestData,
  option: IRequestOption = {}
) {
  return http.request<T>(url, data, { method: 'PUT', ...option });
}

export function del<T = any>(
  url: string,
  data?: string | IRequestData,
  option: IRequestOption = {}
) {
  return http.request<T>(url, data, { method: 'DELETE', ...option });
}

export default http;

请求使用示例

import { get } from '@/request';

export const getUserInfoApi = (data: any) =>
  get('/user', { ...data }, { isNeedToken: false, isShowFailToast: true });

---