Promise 對(duì)象與異步任務(wù)串聯(lián)
在 JavaScript 中，Promise 對(duì)象被用來管理異步任務(wù)。每個(gè) Promise 對(duì)象代表一個(gè)尚未完成的但預(yù)期將來會(huì)完成的操作。通過 then *，我們可以將多個(gè) Promise 對(duì)象串聯(lián)起來，依次執(zhí)行異步任務(wù)。
圖解思路的核心代碼實(shí)現(xiàn)
假設(shè)我們有一系列需要按順序執(zhí)行的異步任務(wù)，每個(gè)任務(wù)都返回一個(gè) Promise 對(duì)象。我們可以通過以下方式串聯(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)鍵字提供了一種更簡(jiǎ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 會(huì)立即拒絕其 Promise，并拋出一個(gè)錯(cuò)誤。由于我們?cè)?nbsp;executeTasks 函數(shù)中使用了 try 和 ca*h，這個(gè)錯(cuò)誤將被捕獲，并在控制*打印出錯(cuò)誤信息。