九個Promises的必知高級用法
概述
Promise 對象表示異步操作的最終完成（或失?。┘捌浣Y(jié)果值。
Promise 始終處于以下狀態(tài)之一：
- 待處理：初始狀態(tài)，既未實(shí)現(xiàn)也未拒絕。
- 已實(shí)現(xiàn)：操作已成功完成。
- 已拒絕：操作失敗。
與“舊式”回調(diào)不同，使用 Promises 具有以下約定：
- 在當(dāng)前事件循環(huán)完成之前，不會調(diào)用回調(diào)函數(shù)。
- 即使異步操作完成（成功或失敗），之后通過 then() 添加的回調(diào)仍將被調(diào)用。
- 可以通過多次調(diào)用 then() 來添加多個回調(diào)，它們將按照添加的順序執(zhí)行。
Promises 的典型特征是鏈接。
一般用法
1.Promise.all([])
當(dāng)數(shù)組中的所有 Promise 實(shí)例都成功時，它會按請求的順序返回成功結(jié)果數(shù)組。如果任何 Promise 失敗，它將進(jìn)入失敗回調(diào)。
const p1 = new Promise((resolve) => {
resolve(1);
});
const p2 = new Promise((resolve) => {
resolve(1);
});
const p3 = Promise.resolve('ok');
// If all promises succeed, result will be an array of 3 results.
const result = Promise.all([p1, p2, p3]);
// If one fails, the result is the failed promise's value.2. Promise.allSettled([])
執(zhí)行不會失??；它返回與輸入數(shù)組中每個 Promise 實(shí)例的狀態(tài)相對應(yīng)的數(shù)組。
const p1 = Promise.resolve(1);
const p2 = Promise.reject(-1);
Promise.allSettled([p1, p2]).then(res => {
console.log(res);
});
// Output:
/*
[
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: -1 }
]
*/3. Promise.any([])
如果輸入數(shù)組中的任何 Promise 滿足條件，則返回的實(shí)例將變?yōu)闈M足條件并返回第一個滿足條件的 Promise 的值。如果所有 Promise 均被拒絕，則將變?yōu)榫芙^條件。
const p1 = new Promise((resolve, reject) => {
reject(1);
});
const p2 = new Promise((resolve, reject) => {
reject(2);
});
const p3 = Promise.resolve("ok");
Promise.any([p1, p2, p3]).then(
(r) => console.log(r), // Outputs 'ok'
(e) => console.log(e)
);4. Promise.race([])
只要數(shù)組中的任何 Promise 改變狀態(tài)，race 方法的狀態(tài)就會隨之改變；第一個改變的 Promise 的值將傳遞給 race 方法的回調(diào)。
const p1 = new Promise((resolve) => {
setTimeout(() => {
resolve(10);
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
throw new Error("I encountered an error");
}, 2000);
});
Promise.race([p1, p2]).then(
(v) => console.log(v), // Outputs 10
(e) => console.log(e)
);拋出異常不會改變競爭狀態(tài)；它仍然由 p1 決定。
高級用法
以下是 9 種高級用法，可幫助開發(fā)人員更高效、更優(yōu)雅地處理異步操作。
1.并發(fā)控制
使用 Promise.all 允許并行執(zhí)行多個 Promises，但要控制同時請求的數(shù)量，您可以實(shí)現(xiàn)并發(fā)控制功能。
const concurrentPromises = (promises, limit) => {
return new Promise((resolve, reject) => {
let i = 0;
let result = [];
const executor = () => {
if (i >= promises.length) {
return resolve(result);
}
const promise = promises[i++];
Promise.resolve(promise)
.then(value => {
result.push(value);
if (i < promises.length) {
executor();
} else {
resolve(result);
}
})
.catch(reject);
};
for (let j = 0; j < limit && j < promises.length; j++) {
executor();
}
});
};2. Promise 超時
有時，可能希望 Promise 在特定時間范圍內(nèi)未解析時自動拒絕。這可以按如下方式實(shí)現(xiàn)。
const promiseWithTimeout = (promise, ms) =>
Promise.race([
promise,
new Promise((resolve, reject) =>
setTimeout(() => reject(new Error('Timeout after ' + ms + 'ms')), ms)
)
]);3. 取消 Promises
原生 JavaScript Promises 無法取消，但你可以通過引入可控中斷邏輯來模擬取消。
const cancellablePromise = promise => {
let isCanceled = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then(
value => (isCanceled ? reject({ isCanceled, value }) : resolve(value)),
error => (isCanceled ? reject({ isCanceled, error }) : reject(error))
);
});
return {
promise: wrappedPromise,
cancel() {
isCanceled = true;
}
};
};4. Promise 數(shù)組的順序執(zhí)行
有時您需要按順序執(zhí)行一系列 Promise，確保前一個異步操作完成后再開始下一個操作。
const sequencePromises = promises =>
promises.reduce(
(prev, next) => prev.then(() => next()),
Promise.resolve()
);5. Promise 的重試邏輯
當(dāng) Promise 因臨時錯誤而被拒絕時，您可能希望重試其執(zhí)行。
const retryPromise = (promiseFn, maxAttempts, interval) => {
return new Promise((resolve, reject) => {
const attempt = attemptNumber => {
if (attemptNumber === maxAttempts) {
reject(new Error('Max attempts reached'));
return;
}
promiseFn().then(resolve).catch(() => {
setTimeout(() => {
attempt(attemptNumber + 1);
}, interval);
});
};
attempt(0);
});
};6. 確保 Promise 僅解析一次
在某些情況下，您可能希望確保 Promise 僅解析一次，即使多次調(diào)用 resolve。
const onceResolvedPromise = executor => {
let isResolved = false;
return new Promise((resolve, reject) => {
executor(
value => {
if (!isResolved) {
isResolved = true;
resolve(value);
}
},
reject
);
});
};7. 使用 Promises 代替回調(diào)
Promises 通過替代回調(diào)函數(shù)，提供了一種更標(biāo)準(zhǔn)化、更方便的方式來處理異步操作。
const callbackToPromise = (fn, ...args) => {
return new Promise((resolve, reject) => {
fn(...args, (error, result) => {
if (error) {
reject(error);
} else {
resolve(result);
}
});
});
};8. 動態(tài)生成 Promise 鏈
在某些情況下，您可能需要根據(jù)不同的條件動態(tài)創(chuàng)建一系列 Promise 鏈。
const tasks = [task1, task2, task3]; // Array of asynchronous tasks
const promiseChain = tasks.reduce((chain, currentTask) => {
return chain.then(currentTask);
}, Promise.resolve());9. 使用 Promises 實(shí)現(xiàn)簡單的異步鎖
在多線程環(huán)境中，可以使用 Promises實(shí)現(xiàn)簡單的異步鎖，確保每次只有一個任務(wù)可以訪問共享資源。
let lock = Promise.resolve();
const acquireLock = () => {
let release;
const waitLock = new Promise(resolve => {
release = resolve;
});
const tryAcquireLock = lock.then(() => release);
lock = waitLock;
return tryAcquireLock;
};這段代碼不斷創(chuàng)建和解析 Promise，實(shí)現(xiàn)了一個簡單的 FIFO 隊列，確保只有一個任務(wù)可以訪問共享資源。
lock 變量表示當(dāng)前是否有任務(wù)正在執(zhí)行，始終指向正在進(jìn)行的任務(wù)的 Promise。
acquireLock 函數(shù)請求執(zhí)行權(quán)限并創(chuàng)建一個新的 Promise 以等待當(dāng)前任務(wù)完成。
結(jié)論
Promise 是現(xiàn)代 JavaScript 異步編程不可或缺的一部分。
掌握它們的高級技巧將大大提高開發(fā)效率和代碼質(zhì)量。通過上述各種方法，開發(fā)人員可以更自信地處理復(fù)雜的異步場景，編寫更易讀、更優(yōu)雅、更健壯的代碼。
