更新记录

1.0.4（2023-07-12）

简化 ts 配置

1.0.3（2023-07-10）

添加取消全部请求，修改文档说明

1.0.2（2023-07-07）

添加多任务取消请求

平台兼容性

构建请求器

// requset/index.ts
import { fetchRequest, fetchConfig } from "@/js_sdk/ym-request/ym-request";

// 定义 baseUrl,如果要跨域或环境切换推荐使用 vite 的代理功能，比如：
// export let baseUrl: string = import.meta.env.VITE_APP_API_BASE_URL;
export let baseUrl: string = "http:xxx.com";

type extraConfig = {
  // 额外的配置，可以自己加，会在 beforeRequestFun 回调中返回
  loading?: boolean; // 手动控制加载状态
  cancel?: boolean; // 请求前控制是否进行请求
  queryKey?: any; // 请求标识，用于手动取消请求，默认为 url
};

const config: fetchConfig = {
  header: {
    "content-type": "application/json",
  },
  method: "POST",
  timeout: 30000,
  dataType: "json",
  responseType: "text",
};

/**
 * 请求拦截器
 *
 * 可以在请求前修改请求配置表,若返回 false 阻止本次请求
 */
function beforeRequestFun(fetchConfig: fetchConfig, extraConfig: extraConfig): fetchConfig | false {
  const { loading = true, cancel } = extraConfig;
  // baseUrl 拼接
  fetchConfig.url = baseUrl + fetchConfig.url;

  if (loading) {
    uni.showLoading();
  }
  if (cancel) {
    return false;
  }
  return fetchConfig;
}

// 请求成功后的回调。可以修改成功后返回的数据
function afterRequestFun(data: AnyObject) {}

// 无论请求是否成功都会执行的回调
function completeFun(data: AnyObject) {
  uni.hideLoading();
}

/**
 *
 * 无论 post 还是 get 请求统一传入 data:any 格式,不区分 body 传参还是 query 传参，uniapp已经做了封装。
 *
 * @param cog 请求配置表
 * @param extraConfig 额外的配置，可以自己加，会在 beforeRequestFun 回调中返回
 * @returns fetch 实例
 */
export function request<T>(cog: fetchConfig, extraConfig: extraConfig = {}) {
  let fetchConfig = { ...config, ...cog };
  const fetch = fetchRequest<T>(
    fetchConfig,
    extraConfig,
    beforeRequestFun,
    afterRequestFun,
    completeFun
  );
  return fetch;
}

接口定义

// requset/apis/index.ts
import { request } from "@/request/index";

interface api1Req {
  name: string;
  age: number;
}
export function api1(data: { name: string }) {
  return request<api1Req>(
    {
      method: "GET",
      url: "/test/api1",
      data,
    },
    {
      loading: false,
    }
  );
}

export function api2(data: any, cancel = false) {
  return request<any>(
    {
      method: "PUT",
      url: "/test/api2",
      data,
    },
    {
      cancel,
    }
  );
}

export function api3() {
  return request<any>({
    method: "POST",
    url: "/test/api3",
  });
}

接口使用

import { api1, api3 } from "@/request/api/index";
import { abortRequestTask } from "@/js_sdk/ym-request/ym-request";

api1({ name: "张三" }).then((res) => {
  console.log(res);
});

api3().then((res) => {
  console.log(res);
});

// 取消请求
abortRequestTask(["/test/api1", "/test/api3"]);

// 取消全部请求
abortRequestTask("All");