本文我將介紹 Promise 對象上 5 個非常有用的方法，掌握這些方法之后，可以讓你更好地解決工作遇到的一些異步問題。
在 JAVAScript 中，許多操作都是異步的，比如發起網絡請求、讀取文件、定時器等。Promise 提供了一種更加結構化和易于理解的方式來處理異步操作，使得異步代碼更加清晰易讀，避免了回調地獄的問題。
本文我將介紹 Promise 對象上 5 個非常有用的方法，掌握這些方法之后，可以讓你更好地解決工作遇到的一些異步問題。
Promise.all()
當你需要并行執行多個異步操作，并且只有當所有異步操作都成功完成時才繼續執行后續代碼。
const promise1 = Promise.resolve("Promise");
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, "is");
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "useful");
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
以上代碼成功運行后，控制臺會輸出以下結果：
[ 'Promise', 'is', 'useful' ]
但如果某個 promise 對象在執行過程中拋出異常，比如，promise2 對象在執行時拋出異常：
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, new Error("Crash..."));
});
那么，你就無法正常獲取 promise1 和 promise3 對象返回的結果。針對這個問題，你可以使用 Promise.allSettled() 方法。
Promise.allSettled()
當你想要等待多個異步操作完成，并且你需要知道每個異步操作的結果。
const promise1 = Promise.resolve("Promise");
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, new Error("Crash..."));
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "useful");
});
Promise.allSettled([promise1, promise2, promise3]).then((values) => {
console.log(values);
});
運行以上代碼之后，控制臺會輸出以下結果。數組中每個對象上的 status 屬性是用于標識對應 promise 對象的執行狀態。
[
{ status: 'fulfilled', value: 'Promise' },
{
status: 'rejected',
reason: Error: Crash...
},
{ status: 'fulfilled', value: 'useful' }
]
Promise.race()
當你有多個異步操作，并且你只關心哪個操作最先完成，不管它是成功還是失敗。
const promise1 = new Promise((resolve, reject) => {
setTimeout(reject, 1000, "Promise 1 resolved");
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, "Promise 2 resolved");
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value);
});
以上代碼成功運行后，控制臺會輸出 "Promise 1 resolved"。
Promise.any()
當你有多個異步操作，并且你想要得到第一個成功的異步操作的結果，而忽略其他已失敗的異步操作。
const promise1 = Promise.reject("any");
const promise2 = new Promise((resolve) =>
setTimeout(resolve, 100, "Promise 2 resolved")
);
const promise3 = new Promise((resolve) =>
setTimeout(resolve, 500, "Promise 3 resolved")
);
Promise.any([promise1, promise2, promise3]).then((value) => {
console.log(value);
});
以上代碼成功運行后，控制臺會輸出 "Promise 2 resolved"。
Promise.withResolvers()
在某些場景下，我們希望在外部控制 Promise 對象的狀態。比如，在請求網絡數據的場景，當成功接收所有數據后，才調用 resolve 方法設置當前 Promise 的返回數據。
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
asyncRequest(config, response => {
const buffer = [];
response.on('callback-request', id => {
promise.then(data => callback(id, data));
});
response.on('data', data => buffer.push(data));
response.on('end', () => resolve(buffer));
response.on('error', reason => reject(reason));
});
上述的場景在日常工作中很常見，為了避免重復寫以下代碼。
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
ts39 增加了 proposal-promise-with-resolvers 草案，目前該草案的狀態已經是 Stage 4。不過在使用的過程中，需要注意它的兼容性：
對于不支持 Promise.withResolvers() 方法的環境，我們可以通過通過自定義函數來實現對應的功能。比如，TypeScript 源碼中，定義了一個 defer 函數來實現 Promise.withResolvers() 方法同樣的功能。
export function defer<T = void>(): Deferred<T> {
let resolve!: (value: T | PromiseLike<T>) => void;
let reject!: (reason: unknown) => void;
const promise = new Promise<T>((_resolve, _reject) => {
resolve = _resolve;
reject = _reject;
});
return { resolve, reject, promise };
}
