Promise 對象與異步任務(wù)串聯(lián)
在 JavaScript 中，Promise 對象被用來管理異步任務(wù)。每個 Promise 對象代表一個尚未完成的但預(yù)期將來會完成的操作。通過 then *，我們可以將多個 Promise 對象串聯(lián)起來，依次執(zhí)行異步任務(wù)。
圖解思路的核心代碼實現(xiàn)
假設(shè)我們有一系列需要按順序執(zhí)行的異步任務(wù)，每個任務(wù)都返回一個 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 捕獲錯誤
在 async 函數(shù)中，try 語句塊用于標(biāo)記要嘗試執(zhí)行的代碼，而 ca*h 語句塊則用于處理在 try 塊中拋出的任何異常。如果 try 塊中的代碼拋出了一個錯誤（例如，由于一個 Promise 被拒絕），程序?qū)⒘⒓刺D(zhuǎn)到 ca*h 塊，并執(zhí)行其中的代碼。
嘗試捕獲錯誤
為了演示 try 和 ca*h 的捕獲錯誤信息能力，我們可以故意將其中一個異步任務(wù)中的 URL 地址寫錯（雖然在這個例子中我們沒有直接使用 URL，但可以模擬一個錯誤）。例如，我們可以在 asyncTask2 中拋出一個錯誤：
function asyncTask2(resultFromTask1) {
return new Promise((resolve, reject) => {
// 模擬錯誤
reject(new Error('Something went wrong in Task 2'));
// setTimeout 和其他邏輯被注釋掉以演示錯誤處理
// 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)運行上述代碼時，asyncTask2 會立即拒絕其 Promise，并拋出一個錯誤。由于我們在 executeTasks 函數(shù)中使用了 try 和 ca*h，這個錯誤將被捕獲，并在控制*打印出錯誤信息。