基本概念

首先，我們需要明白async/await和Promise都是JavaScript中處理異步操作的API。

• Promise: 是一種代表了某個異步操作最終完成（或失敗）及其結(jié)果值的對象。
• async/await: 是基于Promise的語法糖，它允許我們以更同步的方式編寫異步代碼。

使用Promise

基本語法
Promise.all() 接受一個 Promise 數(shù)組作為參數(shù)，返回一個新的 Promise 實(shí)例。這個新 Promise 的行為表現(xiàn)為：

• 當(dāng)所有傳入的 Promises 都成功解決時，它會解決（resolve）為一個包含所有 Promises 結(jié)果的數(shù)組。
• 如果任何一個 Promise 失?。幢痪芙^），Promise.all() 返回的 Promise 會立即失敗，并返回相應(yīng)的錯誤。

在沒有async/await之前，我們通常通過鏈?zhǔn)秸{(diào)用.then()和.catch()方法來處理Promise。例如，如果要按順序執(zhí)行兩個異步操作，可能會這樣寫：

doSomethingAsync()
  .then(result => {
    console.log(result);
    return doSomethingElseAsync(result);
  })
  .then(newResult => {
    console.log(newResult);
  })
  .catch(error => {
    console.error('Something went wrong', error);
  });

這種方式可以有效地處理異步操作，但當(dāng)涉及到多個異步操作時，代碼可能會變得復(fù)雜和難以閱讀，這通常被稱為“回調(diào)地獄”。

并行 vs 串行

Promise.all() 的一個關(guān)鍵優(yōu)勢是它能夠并行處理 Promises。這意味著所有 Promises 都是同時啟動的，這與串行執(zhí)行（一個接一個地執(zhí)行）形成對比。并行執(zhí)行可以顯著提高程序的效率，特別是在處理多個獨(dú)立任務(wù)時。

快速失敗機(jī)制

Promise.all() 實(shí)現(xiàn)了快速失敗機(jī)制，即如果其中一個 Promise 失敗，則整個 Promise.all() 調(diào)用會立即失敗。這種機(jī)制保證了一致的錯誤處理，但也意味著在某些場景下需要更謹(jǐn)慎地處理錯誤。

錯誤處理策略

由于快速失敗的特性，使用 Promise.all() 時應(yīng)該特別注意錯誤處理。例如，如果你正在從多個源加載重要數(shù)據(jù)，一個源的失敗不應(yīng)該阻礙其他數(shù)據(jù)的處理。這時，你可以在每個單獨(dú)的 Promise 上使用 .catch() 方法來處理錯誤，確保每個 Promise 都不會拋出錯誤。

Promise.all([
  fetchUserInfo

(1).catch(err => ({ error: err.message })),
  fetchOrderHistory(1).catch(err => ({ error: err.message }))
])
.then(([userInfo, orders]) => {
  if (!userInfo.error) {
    console.log('用戶信息:', userInfo);
  }
  if (!orders.error) {
    console.log('訂單歷史:', orders);
  }
})
.catch(error => {
  console.error('未預(yù)期的錯誤:', error);
});

在這個修改后的例子中，即使 fetchUserInfo 或 fetchOrderHistory 中的一個失敗了，另一個的結(jié)果仍然會被處理。

實(shí)際應(yīng)用場景

Promise.all() 的應(yīng)用場景非常廣泛，以下是一些具體的例子：

1. 資源加載

在網(wǎng)頁開發(fā)中，你可能需要同時加載多個資源，如圖片、JSON 數(shù)據(jù)和腳本文件。使用 Promise.all() 可以同時啟動所有資源的加載，并在全部資源加載完成后執(zhí)行后續(xù)操作。

let imageLoadPromise = loadImage('image.png');
let dataLoadPromise = fetchData('/data.json');
let scriptLoadPromise = loadScript('script.js');

Promise.all([imageLoadPromise, dataLoadPromise, scriptLoadPromise])
    .then(([image, data, script]) => {
        // 所有資源加載完成
    })
    .catch(error => {
        // 處理加載錯誤
    });

2. 數(shù)據(jù)庫操作

在服務(wù)器端應(yīng)用程序中，當(dāng)你需要執(zhí)行多個沒有依賴的數(shù)據(jù)庫查詢時，Promise.all() 可以并行執(zhí)行這些查詢，提高查詢效率。

let userQuery = db.query("SELECT * FROM users WHERE id = ?", [userId]);
let postsQuery = db.query("SELECT * FROM posts WHERE authorId = ?", [userId]);

Promise.all([userQuery, postsQuery])
    .then(([users, posts]) => {
        // 處理查詢結(jié)果
    })
    .catch(error => {
        // 處理數(shù)據(jù)庫錯誤
    });

3. API 聚合

在構(gòu)建一個聚合多個 API 數(shù)據(jù)的服務(wù)時，Promise.all() 可以并行調(diào)用這些 API，并在所有調(diào)用都完成后聚合這些數(shù)據(jù)。

let weatherPromise = fetchWeather(cityId);
let newsPromise = fetchNews(topic);

Promise.all([weatherPromise, newsPromise])
    .then(([weather, news]) => {
        // 創(chuàng)建包含天氣和新聞的聚合數(shù)據(jù)
    })
    .catch(error => {
        // 處理 API 調(diào)用錯誤
    });

使用async/await

async/await是在ES2017中引入的，使得異步代碼的閱讀和編寫更像是傳統(tǒng)的同步代碼。async關(guān)鍵字用于聲明一個異步函數(shù)，而await關(guān)鍵字則用于等待一個Promise的解決（fulfill）或拒絕（reject）。

同樣的操作，使用async/await可以這樣寫：

async function asyncFunction() {
  try {
    const result = await doSomethingAsync();
    console.log(result);

    const newResult = await doSomethingElseAsync(result);
    console.log(newResult);
  } catch (error) {
    console.error('Something went wrong', error);
  }
}

在這個示例中，await使得JavaScript運(yùn)行時等待Promise的解決，并且暫停函數(shù)的執(zhí)行，直到Promise被解決。如果Promise被拒絕，錯誤將被catch塊捕獲。

總結(jié)區(qū)別

• 語法清晰: async/await提供了一種更清晰、更直觀的方式來處理異步操作。代碼看起來更像是同步的，因此更易于理解和維護(hù)。
• 錯誤處理: 使用async/await時，可以使用傳統(tǒng)的try/catch語句進(jìn)行錯誤處理，這對于很多開發(fā)者來說更加熟悉。
• 調(diào)試友好: async/await使得在異步代碼中使用斷點(diǎn)調(diào)試變得更加直觀。
• 基于Promise: async/await是建立在Promise之上的，實(shí)質(zhì)上它并沒有替代Promise的功能，而是提供了一種更簡潔的使用方式。

需要注意的是，async/await并不是在所有情況下都替代Promise鏈。例如，在處理多個并行異步操作時，Promise.all()仍然是一個非常有用的選擇。

到此這篇關(guān)于js中async/await與Promise的區(qū)別的文章就介紹到這了,更多相關(guān)js async/await與Promise內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論