5個很棒的JavaScript Promise技巧

​

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

取消擷取請求

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

const controller = new AbortController();
const { signal } = controller;


fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});


// Abort request
controller.abort();      

這裡的神奇之處在于為每個fetch請求提供信号。在JavaScript世界中，我們繼承了困難的API，并對它們進行了奇妙的抽象，是以我們将找到一種方法來更好地抽象這個API。

等待時間，永遠等待

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

/* Wait for milliseconds */
function waitForTime(ms) {
  return new Promise(r => setTimeout(r, ms));
}


/* Usage */
await waitForTime(200);


/* Wait Forever */
function waitForever() {
  return new Promise(r => {});
}


// Usage:
await waitForever();      

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

異步數組函數

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

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


await promises;      

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

然後在對象

您知道可以在對象上任意添加一個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, …}


// ... or an await...
const response = await j;
// Response {type: "basic", url: "https://davidwalsh.name/", redirected: false, status: 200, ok: true, …}      

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

檢測異步函數

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

async function myFunction() {


}


const isAsync = myFunction.constructor.name === "AsyncFunction";