Taro: Taro.request 调用abort方法 报错

[ouyangshan09]

问题描述
使用Taro.request() 返回的值，调用abort() 报错

复现步骤
[复现问题的步骤]

1. 导入@tarojs/taro
2. 执行 const requstTask = Taro.rqeust(object)
3. 执行 requstTask.abort()
4. 小程序报错，报错如图下所示
   

const requestTask = Taro.request({
  url: 'https://xxx/api/auth/login',
  data: {
    account: 'admin',
    password: '123456',
  },
  method: 'POST',
  success: (res) => {
    console.log('request login res:', res);
  },
  fail: (error) => {
    console.log('request login error:', error);
  },
  complete: () => {
    console.log('request login complete:');
  }
});
requestTask.abort()

期望行为
调用abort方法，可以正常取消请求，并且ts不会提示类型“Promise<Promised<any>>”上不存在属性“abort”

报错信息

系统信息

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.1.3.4]
• Node.js 版本 [e.g. v8.9.3]
• 报错平台 [weapp]

补充信息

1178 该问题并没有修复

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Garfield550]

@Chen-jj 看代码是把 abort() 方法加到 request 返回的 res 上了对吗？

const response = await Taro.request(...param);
response.abort();

[Chen-jj]

@Garfield550 不是呃，加到 res 上就没有 abort 的意义了，因为请求已经完成了。

可以像楼主这样用：

const requestTask = Taro.request({
  url: 'https://xxx/api/auth/login',
  data: {
    account: 'admin',
    password: '123456',
  },
  method: 'POST',
  success: (res) => {
    console.log('request login res:', res);
  },
  fail: (error) => {
    console.log('request login error:', error);
  },
  complete: () => {
    console.log('request login complete:');
  }
});
requestTask.abort()

也可以：

const requestTask = Taro.request({
  url: 'https://xxx/api/auth/login',
  data: {
    account: 'admin',
    password: '123456',
  },
  method: 'POST'
});
if (reason) requestTask.abort()
requestTask
  .then(res => ...)

[Garfield550]

@Chen-jj 那么意味着 async/await 方式没有办法用 abort 吗？
另外 taro request 的 typings ，abort 该怎么定义

[Garfield550]

namespace request {
  type Promised<T extends any | string | ArrayBuffer = any> = {
    data: T;
    statusCode: number;
    header: any;
  };
  type Param<P extends any | string | ArrayBuffer = any> = {
    url: string;
    data?: P;
    header?: any;
    method?:
      | 'OPTIONS'
      | 'GET'
      | 'HEAD'
      | 'POST'
      | 'PUT'
      | 'DELETE'
      | 'TRACE'
      | 'CONNECT';
    dataType?: string;
    responseType?: string;
    jsonp?: boolean;
    jsonpCache?: boolean;
    mode?: 'no-cors' | 'cors' | 'same-origin';
    credentials?: 'include' | 'same-origin' | 'omit';
    cache?:
      | 'default'
      | 'no-cache'
      | 'reload'
      | 'force-cache'
      | 'only-if-cached';
    timeout?: number;
    retryTimes?: number;
    backup?: string | string[];
    dataCheck?(): boolean;
    useStore?: boolean;
    storeCheckKey?: string;
    storeSign?: string;
    storeCheck?(): boolean;
    success?: ParamPropSuccess;
    fail?: ParamPropFail;
    complete?: ParamPropComplete;
  };
  type ParamPropSuccess = (res: any) => any;
  type ParamPropFail = (err: any) => any;
  type ParamPropComplete = () => any;
}

function request<T = any, U = any>(
  OBJECT: request.Param<U>
): Promise<request.Promised<T>>;

当前 request 的 typings 是这样的，Promise 返回的是 { data: T = any, statusCode: number, header: any }

[Chen-jj]

@Garfield550 可以吧。

const response = Taro.request(...param);
const res = await response
response.abort();

types 可以这样定义：

[Garfield550]

@Chen-jj 你看这么定义可以吗？

namespace request {
  type Promised<T extends any | string | ArrayBuffer = any> = {
    data: T;
    statusCode: number;
    header: any;
  };

  interface requestTask<T> extends Promise<request.Promised<T>> {
    abort(): void;
  }

  type Param<P extends any | string | ArrayBuffer = any> = {
    url: string;
    data?: P;
    header?: any;
    method?:
      | 'OPTIONS'
      | 'GET'
      | 'HEAD'
      | 'POST'
      | 'PUT'
      | 'DELETE'
      | 'TRACE'
      | 'CONNECT';
    dataType?: string;
    responseType?: string;
    jsonp?: boolean;
    jsonpCache?: boolean;
    mode?: 'no-cors' | 'cors' | 'same-origin';
    credentials?: 'include' | 'same-origin' | 'omit';
    cache?:
      | 'default'
      | 'no-cache'
      | 'reload'
      | 'force-cache'
      | 'only-if-cached';
    timeout?: number;
    retryTimes?: number;
    backup?: string | string[];
    dataCheck?(): boolean;
    useStore?: boolean;
    storeCheckKey?: string;
    storeSign?: string;
    storeCheck?(): boolean;
    success?: ParamPropSuccess;
    fail?: ParamPropFail;
    complete?: ParamPropComplete;
  };
  type ParamPropSuccess = (res: any) => any;
  type ParamPropFail = (err: any) => any;
  type ParamPropComplete = () => any;
}

function request<T = any, U = any>(
  OBJECT: request.Param<U>
): request.requestTask<T>;

const response = await Taro.request(params);
const requestTask = Taro.request(params);
requestTask.abort();

[Chen-jj]

@Garfield550 可以呀

[Garfield550]

@Chen-jj OK 我去提 PR 了

[Garfield550]

@Chen-jj 下面两个暂时还不支持对吗

RequestTask.offHeadersReceived(function callback)

RequestTask.onHeadersReceived(function callback)

[Chen-jj]

@Garfield550 可以搞，还没空搞，大概是 request params 里有定义这两个函数的话，给加到 requestTask 上。欢迎 PR 哈。

[Garfield550]

@Chen-jj 可以 Review 一下，有问题在 PR 上提 Request Change

[Garfield550]

注释的示例代码为 VSCode 优化了一下

[TigerHee]

调用addInterceptor后Taro.request的返回就没有abort方法了