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

我在異步函數中的await語句是對jQuery的$ .post（）方法的調用，它返回一個有效的promise，但是我在TypeScript ：

'await'操作數的類型必須是有效的承諾或不得包含可調用'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正在和$。員額（））上有一個問題，因爲你可以打電話。然後（，但我怎麼解決這個問題得到什麼？另外，在更新2.4.2之前我沒有這個錯誤。

來源

2017-07-24 Amir

看來確實打字稿是討厭關於jQuery的返回一個也是jqXHR對象的promise對象。試試'postResult = await Promise.resolve（$。post（postUrl，$ .param（postData）））;'或者，或者：postResult = await $ .post（postUrl，$ .param（postData））。then（） ;'儘管後者可能會引發同樣的錯誤。 – trincot

@trincot您的解決方案都可以工作。似乎有點骯髒和不必要的，但我猜目前爲止最好的選擇。如果您想提供您的評論作爲答案，我會將其標記爲已接受。 – Amir

看來確實打字稿是討厭關於jQuery的返回一個承諾對象，它是既a deferred and a jqXHR object：

的jqXHR對象由$.ajax()返回的jQuery 1.5履行承諾的界面，讓他們所有的屬性，方法和Promise的行爲（有關更多信息，請參閱Deferred object）。

至少有兩種方法可以解決這個固執打字本：

你可以返回值傳遞給Promise.resolve()，這將返回真ES6承諾，承諾的值相同：

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

或者，您也可以應用then method，它返回一個（較少污染的）承諾：

在jQuery 1.8中，deferred.then()方法返回一個新的承諾

通過不提供任何參數then您有效地返回相同的承諾價值承諾：

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

來源

2017-07-24 20:14:00 trincot

這兩個很好的解決方案！這也意味着你不必編輯.d.ts文件。 – libertyernie

JQueryXHR有它自己的。後來的版本（），它有一些額外的選項：

then<R>(doneCallback: (data: any, textStatus: string, jqXHR: JQueryXHR) => R, failCallback?: (jqXHR: JQueryXHR, textStatus: string, errorThrown: any) => void): JQueryPromise<R>;

要使用在等待與打字稿.post的$，我不得不刪除從jquery.d.ts該行。然後TypeScript將看到在JQueryGenericPromise上定義的.then。

來源

2017-07-24 18:16:00 libertyernie

這是一個有用的解釋！ ++ – trincot

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

回答

相關問題