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

取消獲取請(qǐng)求

我們立即抱怨的一個(gè)問題是無法取消承諾。一個(gè)簡單的promiseInstance.cancel()本來是很好的選擇，但沒有出現(xiàn)。相反，我們得到的是一個(gè)更為復(fù)雜的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();

這里的神奇之處在于為每個(gè)fetch請(qǐng)求提供信號(hào)。在JavaScript世界中，我們繼承了困難的API，并對(duì)它們進(jìn)行了奇妙的抽象，因此我們將找到一種方法來更好地抽象這個(gè)API。

等待時(shí)間，永遠(yuǎn)等待

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

/* 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();

不要等待完美的情況，等待你需要的時(shí)間。

異步數(shù)組函數(shù)

像forEach、map和其他函數(shù)這樣的數(shù)組函數(shù)經(jīng)常被使用，而不需要它們是同步的。我們不去想它有相當(dāng)多的時(shí)間我們可以在我們的操作中實(shí)現(xiàn)異步。

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

異步和同步的區(qū)別是有承諾的。當(dāng)你可以的時(shí)候，去異步!

然后在對(duì)象

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

現(xiàn)在你知道!一個(gè)大多數(shù)人都不知道的絕妙把戲!

檢測異步函數(shù)

這不是你經(jīng)常需要做的事情，但這篇文章是關(guān)于技巧的，對(duì)嗎?如果你想檢測一個(gè)異步函數(shù)，你總是可以:

async function myFunction() { } const isAsync = myFunction.constructor.name === "AsyncFunction";

JavaScript承諾是我們每天都要做的事情，但更廣泛地看待它們會(huì)讓我們有所創(chuàng)新!你有自己的承諾技巧嗎?請(qǐng)分享!