如何在async/await和typescript中使用jQuery的$ .post()方法

Question

异步函数中的我的await语句是对jQuery的$ .post()方法的调用,该方法返回一个有效的promise,但是我在TypeScript中遇到了这个错误:

'await'操作数的类型必须是有效的promise或者不能包含可调用的'then'成员.

我的功能是这个(示例简化).代码有效且有效,但我在TS控制台中收到错误.

 async function doAsyncPost() {
    const postUrl = 'some/url/';
    const postData = {name: 'foo', value: 'bar'};
    let postResult;
    let upateResult;

    function failed(message: string, body?: string) {
      console.log('error: ', message, ' body: ', body);
    }

    function promiseFunc() {
      return new Promise<void>( resolve => {
        // ... do something else....
        resolve();
      });
    };

    function finish() {
      // ... do something at the end...
    }

    try {
      // The error is on the $.post()
      postResult = await $.post(postUrl, $.param(postData));
      if (postResult.success !== 'true') {
        return failed('Error as occoured', 'Description.....');
      }      
      await promiseFunc();

      return finish();
    } catch (e) {
      await failed('Error as occoured', 'Description.....');
    }
  }

我猜TS有$ .post()的问题,因为你可以调用.then(),但是如何解决这个问题呢？此外,在更新2.4.2之前,我没有此错误.

Answer 1

看起来确实TypeScript对于jQuery返回一个promise对象是一个讨厌的东西,这个对象既是延迟对象又是jqXHR对象:

从$.ajax()jQuery 1.5开始返回的jqXHR对象实现了Promise接口,为它们提供了Promise的所有属性,方法和行为(有关更多信息,请参阅Deferred对象).

TypeScript的这种顽固性至少有三种解决方法

解决方案返回纯ES6 Promise

你可以传递返回值Promise.resolve(),它将返回一个真正的ES6 Promise,承诺相同的值:

postResult = await Promise.resolve($.post(postUrl, $.param(postData)));

返回jQuery承诺的解决方案

另外两个选择不会返回纯ES6承诺,但jQuery承诺,仍然足够好.请注意,这些promise对象只是jQuery 3以后的Promises/A +兼容:

您可以应用该deferred.promise方法,该方法返回一个jQuery promise对象:

postResult = await $.post(postUrl, $.param(postData)).promise();

或者,您可以应用该deferred.then方法,该方法还返回jQuery承诺:

从jQuery 1.8开始,该deferred.then()方法返回一个新的promise

通过不向then您提供任何参数有效地返回对相同承诺值的承诺:

postResult = await $.post(postUrl, $.param(postData)).then();