不要在循環await啦，異步操作的六個最佳實踐！

作者：程序員Sunday 2025-04-11 11:55:49

前兩天有個同學在面試中被問到了一個問題：“如果在請求多個不同的接口，那么應該如何去做？” 該同學回答說：“我們可以把這些接口放到一個數組中，然后通過?for?循環來循環請求！”

前兩天有個同學在面試中被問到了一個問題：“如果在請求多個不同的接口，那么應該如何去做？” 該同學回答說：“我們可以把這些接口放到一個數組中，然后通過 for 循環來循環請求！”

嗯...這確是是一個方式，不過這并不好。再加上異步問題現在已經成了面試中的常見問題，所以，今天咱們就來說一下異步請求的最佳實踐，幫助大家解決異步編程，以及面試問題。

1.不使用 await 的循環請求

我們不應該在循環內使用 await。而是可以利用 promise.all 方法：

// ?async function fn(reqs) {  const results = [];  for (const req of reqs) {    // 每次循環迭代都會延遲到整個異步操作完成    results.push(await req);  }  return results;}

// ?
async function fn(reqs) {
  // 存儲所有異步操作的 Promise
  const promises = reqs.map((req) => req); // 所有異步操作都已經開始，現在等待它們全部完成
  const results = await Promise.all(promises);
  return results;
}

2.不要在 promise 中執行返回操作

不要在 Promise 構造函數中返回值。從那里返回的值是無用的。它們也不影響 Promise 的狀態。

正確的方法是使用 resolve 傳遞值。
如果有錯誤，則使用 reject 傳遞錯誤。

// ?
new Promise((resolve, reject) => {
    // 返回沒有意義
    if (b) {
        return result;
    }
});

// ?
new Promise((resolve, reject) => {
    // 利用 resolve 傳遞
    if (b) {
        resolve(result);
        return;
    }
});

3.避免競態問題

看以下代碼，你認為最終打印會是多少？

// ?
let totalPosts = 0;

async function getPosts(userId) {
  // 模擬獲取用戶的帖子數量
  const users = [
    { id: 1, posts: 5 },
    { id: 2, posts: 3 },
  ]; // 模擬異步延遲
  await sleep(Math.random() * 1000); // 返回對應用戶的帖子數量
  return users.find((user) => user.id === userId).posts;
}

async function sleep(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

async function addPosts(userId) {
  // 將用戶的帖子數量加到總帖子數上
  totalPosts += await getPosts(userId);
}

// 并行地獲取兩個用戶的帖子數量，并在全部獲取完畢后輸出總帖子數
await Promise.all([addPosts(1), addPosts(2)]);
console.log("帖子數量:", totalPosts);

執行以上代碼，你可能會打印 3 或 5，而不是 8。

這個原因就是因為競態條件問題而導致的。當在單獨的函數調用中更新值時，更新不會反映在當前函數作用域中。因此，這兩個函數都將其結果添加到初始的 TotalPosts 值 0 中。

以下是避免競態條件的方式：

// ?
let totalPosts = 0;

async function getPosts(userId) {
  const users = [
    { id: 1, posts: 5 },
    { id: 2, posts: 3 },
  ];
  await sleep(Math.random() * 1000);
  return users.find((user) => user.id === userId).posts;
}

async function sleep(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

async function addPosts(userId) {
  const posts = await getPosts(userId);
  totalPosts += posts; // 變量被讀取并立即更新
}

await Promise.all([addPosts(1), addPosts(2)]);
console.log("帖子數量:", totalPosts);

4.避免回調地獄

這個問題大家應該很好理解，直接看代碼即可

// ?
async1((err, result1) => {
  async2(result1, (err, result2) => {
    async3(result2, (err, result3) => {
      async4(result3, (err, result4) => {
        console.log(result4);
      });
    });
  });
});

// ?
const result1 = await asyncPromise1();
const result2 = await asyncPromise2(result1);
const result3 = await asyncPromise3(result2);
const result4 = await asyncPromise4(result3);
console.log(result4);

5.避免直接返回 await

盡量避免直接返回 await ，特別是在需要 try..catch 的時候：

// ?
async () => {
  try {
    return await getUser(userId);
  } catch (error) {
    // 輸出錯誤
  }
};

// ?
async () => {
  try {
    const user = await getUser(userId);
    return user;
  } catch (error) {
    // 輸出錯誤
  }
};

6.reject 最好配合 Error 使用

// ?
Promise.reject('這是一個錯誤');

// ?
Promise.reject(new Error('這是一個錯誤'));

責任編輯：武曉燕來源：程序員Sunday

await 接口循環