function request(opt) {
  return new Promise((success, fail) => {
    const requestTask = wx.request({
      ...opt,
      success,
      fail,
    });
    opt.signal && (opt.signal.onabort = () => requestTask.abort())
  })
}

// usage
const signal = {};
request({
  url: "localhost",
  signal: signal
}).then(response => console.debug(response)).catch(error => console.error(error));
signal.onabort();

设计思路来源于 fetch AbortSignal

由于小程序没有事件系统🙄，使用onabort粗暴处理了。可根据需要自己编写事件系统使程序更加贴合web规范。

demo实现思路，挂载在返回的promise上，但会有问题，你可以看到在调用的时候需要手动声明一个promise变量，不能直接a().then() 因为then返回的是一个新的Promise，上面没有挂载的task。

今天遇到了这个问题，在不影响从前的代码的情况下想出来的。更好的思路暂时没有。这里就抛砖引玉了

class Request {
  constructor(parms) {
    this.withBaseURL = parms.withBaseURL;
    this.baseURL = parms.baseURL;
    this.requestTask = null;
  }

  get(url, data) {
    return this.request('GET', url, data);
  }

  post(url, data) {
    return this.request('POST', url, data);
  }

  put(url, data) {
    return this.request('PUT', url, data);
  }

  request(method, url, data) {
    const vm = this;
    return new Promise((resolve, reject) => {
      this.requestTask = wx.request({
        url: vm.withBaseURL ? vm.baseURL + url : url,
        data,
        method,
        success(res) {
          resolve(res);
        },
        fail() {
          reject({
            msg: '请求失败',
            url: vm.withBaseURL ? vm.baseURL + url : url,
            method,
            data
          });
        }
      });
    });
  }

  abort() {
    if (this.requestTask) {
      this.requestTask.abort();
    }
  }
}

const request = new Request({
  baseURL: 'http://test',
  withBaseURL: true
});

module.exports = request;

--------

调用：

request.get(xxx, xxx).then((res) => {

  request.abort();

 })

https://github.com/xdoer/PreQuest/blob/main/packages/miniprogram/src/adapter.ts

可以看看这个源码，采用了 axios 的 cancel-token 的思想。

function request(url, opt){
  const { getNativeRequestInstance } = opt
  return new Promise(() => {
      let resolvePromise: any
      let promise = new Promise(resolve => (resolvePromise = resolve))
      getNativeRequestInstance(promise)

      const instance = wx.request({
         // ... 参数
      })

      resolvePromise(instance)
  })
}

用法如下:

const req = await request('/api', {
   getNativeRequestInstance(promise) {
     promise.then(instance => {
       instance.abort()
     })
   }
})

挖坟看到这了，有一个思路是返回两个值。 如：

let（asyncTask,asyncController) = request(...);

asyncTask.then(res=>...);

asyncController.abort();

===

代码开源在这，有增强的朋友可以在增强

https://git.weixin.qq.com/jiji-opensouce/wx-xcx-empty-template/blob/master/utils/restapi.js

function request(params) {
  const { url, method, header, data } = params
  let taskController;
  let task = new Promise((resolve, reject) => {
    taskController = wx.request({
      url,
      header,
      data,
      method,
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject({
          msg: '请求失败',
          url,
          method,
          data,
          header,
          err,
        })
      }
    })
  });
  return { task, taskController };
}

// 使用 示例
 request({ url: "http://www.qq.com", method: "GET" }).task.then(res=> console.log(res));

request({ url: "http://www.qq.com", method: "GET" }).taskController.abort();

/**
 * 微信wx.Request 请求接口的附加值
 */
export interface PromiseWxResponse<T> extends Promise<T> {
  /**
   * Response对象
   */
  wxResult?: WechatMiniprogram.RequestSuccessCallbackResult,
  /**
   * 微信wx.Request 的实例
   */
  wxRequestTask?:WechatMiniprogram.RequestTask
}

/**
 * 统一的HTTP请求入口
 * @param options {string | RequestOption} url 接口地址 或者 RequestOption 对象
 * @param needLoginCallback 登录拦截的callback方法。当接口数据返回成功、且code是401时，将执行needLoginCallback
 * @returns {PromiseWxResponse<*>
 */
export const request = (options: RequestWxOption): PromiseWxResponse<any> => {



  const promise: PromiseWxResponse<any> = new Promise((resolve, reject) => {

    const requestTask:WechatMiniprogram.RequestTask = wx.request(<WechatMiniprogram.RequestOption>{
      url: options.url,
      method: options.method,
      data: options.data,
      header: options.header,
      success: (result: WechatMiniprogram.RequestSuccessCallbackResult) => {

        promise.wxRequestTask = requestTask;
        promise.wxResult = result;

        resolve(data);e {
          
        }
      },
      fail: (result: WechatMiniprogram.GeneralCallbackResult) => {
        promise.wxRequestTask = requestTask;
        reject(result);
      }
    });
  });
  return promise;
};

个人感觉最好不要对返回的Promise做修改不然下游的流程处理都会变得繁琐起来

可以借助web规范里的AbortSignal，或着更简单方法是在入口参数加个配置项：

onCancel?: (cancel: () => void) => void



ts源码：