Promise API改變了JavaScript的遊戲。我們從濫用settimeout和解決同步操作到盡一切可能利用這個新的非同步API。讓我們來看看一些令人敬畏的Promise API技巧!

取消獲取請求

我們立即抱怨的一個問題是無法取消承諾。一個簡單的promiseInstance.cancel()本來是很好的選擇，但沒有出現。相反，我們得到的是一個更為複雜的API:

constcontroller=newAbortController();
const{signal}=controller;

fetch("http://localhost:8000",{signal}).then(response=>{
console.log(`Request1iscomplete!`);
}).catch(e=>{
console.warn(`Fetch1error:${e.message}`);
});

//Abortrequest
controller.abort();
 

這裡的神奇之處在於為每個fetch請求提供訊號。在JavaScript世界中，我們繼承了困難的API，並對它們進行了奇妙的抽象，因此我們將找到一種方法來更好地抽象這個API。

等待時間，永遠等待

等待一段時間在大量生產和測試情況下是很有用的——這並不理想，但總是有幫助的。我用了兩個很棒的功能讓我的生活變得更好:

/*Waitformilliseconds*/
functionwaitForTime(ms){
returnnewPromise(r=>setTimeout(r,ms));
}

/*Usage*/
awaitwaitForTime(200);

/*WaitForever*/
functionwaitForever(){
returnnewPromise(r=>{});
}

//Usage:
awaitwaitForever();
 

不要等待完美的情況，等待你需要的時間。

https://www.55wd.com 資源網站大全

非同步陣列函式

像forEach、map和其他函式這樣的陣列函式經常被使用，而不需要它們是同步的。我們不去想它有相當多的時間我們可以在我們的操作中實現非同步。

constpromises=[1,2,3].map(async(num)=>{
console.log(num);
});

awaitpromises;

非同步和同步的區別是有承諾的。當你可以的時候，去非同步!

然後在物件

您知道可以在物件上任意新增一個then方法來將它們作為Promise處理嗎?

j={then:resolve=>fetch("/").then(resolve)}

j.then(res=>console.log(res));
//Response{type:"basic",url:"https://davidwalsh.name/",redirected:false,status:200,ok:true,…}

//...oranawait...
constresponse=awaitj;
//Response{type:"basic",url:"https://davidwalsh.name/",redirected:false,status:200,ok:true,…}
 

現在你知道!一個大多數人都不知道的絕妙把戲!

檢測非同步函式

這不是你經常需要做的事情，但這篇文章是關於技巧的，對嗎?如果你想檢測一個非同步函式，你總是可以:

asyncfunctionmyFunction(){

}

constisAsync=myFunction.constructor.name==="AsyncFunction";

JavaScript承諾是我們每天都要做的事情，但更廣泛地看待它們會讓我們有所創新!你有自己的承諾技巧嗎?