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。

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

因为是异步函数，获取服务器数据时会出现几秒至几十秒的延迟，

在渲染页面的时候如果要用到服务器数据的可能获取不到，

一个常用的解决方式是所有涉及到服务器数据的变量都要进行初始化，并且页面加载的时候用loading提示

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源码：