來源 | http://www.fly63.com/article/detial/10370

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

取消獲取請求

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

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

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

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

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

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

然后在對象

您知道可以在對象上任意添加一個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)在你知道!一個大多數(shù)人都不知道的絕妙把戲!

檢測異步函數(shù)

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

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

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

學習更多技能

請點擊下方公眾號