Hello,大家好,我是 Sunday。
前兩天有個同學在面試中被問到了一個問題:“如果在請求多個不同的接口,那么應該如何去做?” 該同學回答說:“我們可以把這些接口放到一個數組中,然后通過 for 循環來循環請求!”
嗯...這確是是一個方式,不過這并不好。再加上異步問題現在已經成了面試中的常見問題,所以,今天咱們就來說一下 異步請求的最佳實踐,幫助大家解決異步編程,以及面試問題。
我們不應該在循環內使用 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}
不要在 Promise 構造函數中返回值。 從那里返回的值是無用的。 它們也不影響 Promise 的狀態。
// ?new Promise((resolve, reject) => { // 返回沒有意義 if (b) { return result; }});// ?new Promise((resolve, reject) => { // 利用 resolve 傳遞 if (b) { resolve(result); return; }});
看以下代碼,你認為最終打印會是多少?
// ?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);
這個問題大家應該很好理解,直接看代碼即可
// ?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);
盡量避免直接返回 await ,特別是在需要 try..catch 的時候:
// ?async () => { try { return await getUser(userId); } catch (error) { // 輸出錯誤 }}// ?async () => { try { const user = await getUser(userId); return user; } catch (error) { // 輸出錯誤 }}
// ?Promise.reject('這是一個錯誤');// ?Promise.reject(new Error('這是一個錯誤'));
本文鏈接:http://www.tebozhan.com/showinfo-26-83620-0.html不要在循環await啦,異步操作的六個最佳實踐!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 要么返回錯誤值,要么輸出日志,別兩樣都做