Promise 對象與異步任務(wù)串聯(lián)
在 JavaScript 中,Promise 對象被用來管理異步任務(wù)。每個(gè) Promise 對象代表一個(gè)尚未完成的但預(yù)期將來會完成的操作。通過then*,我們可以將多個(gè) Promise 對象串聯(lián)起來,依次執(zhí)行異步任務(wù)。圖解思路的核心代碼實(shí)現(xiàn)假設(shè)我們有一系列需要按順序執(zhí)行的異步任務(wù),每個(gè)任務(wù)都返回一個(gè) Promise 對象。我們可以通過以下方式串聯(lián)這些任務(wù):function asyncTask1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
c*ole.log('Task 1 completed');
resolve('Result from Task 1');
}, 1000);
});
}
function asyncTask2(resultFromTask1) {
return new Promise((resolve, reject) => {
setTimeout(() => {
c*ole.log('Task 2 completed with input:', resultFromTask1);
resolve('Result from Task 2');
}, 1000);
});
}
function asyncTask3(resultFromTask2) {
return new Promise((resolve, reject) => {
setTimeout(() => {
c*ole.log('Task 3 completed with input:', resultFromTask2);
resolve('Result from Task 3');
}, 1000);
});
}
// 使用 then *串聯(lián)任務(wù)
asyncTask1()
.then(result1 => asyncTask2(result1))
.then(result2 => asyncTask3(result2))
.then(result3 => {
c*ole.log('Final result:', result3);
})
.ca*h(error => {
c*ole.error('An error occurred:', error);
});
使用 async 和 await 解決回調(diào)地獄async和await關(guān)鍵字提供了一種更簡潔的方式來處理 Promise,避免了回調(diào)地獄的問題。在async函數(shù)內(nèi)部,我們可以使用await關(guān)鍵字等待 Promise 的結(jié)果,而不必使用then*。async function executeTasks() {
try {
c*t result1 = await asyncTask1();
c*t result2 = await asyncTask2(result1);
c*t result3 = await asyncTask3(result2);
c*ole.log('Final result:', result3);
} ca*h (error) {
c*ole.error('An error occurred:', error);
}
}
executeTasks();
使用 try 和 ca*h 捕獲錯(cuò)誤在async函數(shù)中,try語句塊用于標(biāo)記要嘗試執(zhí)行的代碼,而ca*h語句塊則用于處理在try塊中拋出的任何異常。如果try塊中的代碼拋出了一個(gè)錯(cuò)誤(例如,由于一個(gè) Promise 被拒絕),程序?qū)⒘⒓刺D(zhuǎn)到ca*h塊,并執(zhí)行其中的代碼。嘗試捕獲錯(cuò)誤為了演示try和ca*h的捕獲錯(cuò)誤信息能力,我們可以故意將其中一個(gè)異步任務(wù)中的 URL 地址寫錯(cuò)(雖然在這個(gè)例子中我們沒有直接使用 URL,但可以模擬一個(gè)錯(cuò)誤)。例如,我們可以在asyncTask2中拋出一個(gè)錯(cuò)誤:function asyncTask2(resultFromTask1) {
return new Promise((resolve, reject) => {
// 模擬錯(cuò)誤
reject(new Error('Something went wrong in Task 2'));
// setTimeout 和其他邏輯被注釋掉以演示錯(cuò)誤處理
// setTimeout(() => {
// c*ole.log('Task 2 completed with input:', resultFromTask1);
// resolve('Result from Task 2');
// }, 1000);
});
}
// 調(diào)用 async 函數(shù)執(zhí)行任務(wù)
executeTasks();
當(dāng)運(yùn)行上述代碼時(shí),asyncTask2會立即拒絕其 Promise,并拋出一個(gè)錯(cuò)誤。由于我們在executeTasks函數(shù)中使用了try和ca*h,這個(gè)錯(cuò)誤將被捕獲,并在控制*打印出錯(cuò)誤信息。