不要在循環(huán)await啦，異步操作的六個(gè)最佳實(shí)踐！
Hello，大家好，我是 Sunday。
前兩天有個(gè)同學(xué)在面試中被問(wèn)到了一個(gè)問(wèn)題：“如果在請(qǐng)求多個(gè)不同的接口，那么應(yīng)該如何去做？” 該同學(xué)回答說(shuō)：“我們可以把這些接口放到一個(gè)數(shù)組中，然后通過(guò) for 循環(huán)來(lái)循環(huán)請(qǐng)求！”
嗯...這確是是一個(gè)方式，不過(guò)這并不好。再加上異步問(wèn)題現(xiàn)在已經(jīng)成了面試中的常見(jiàn)問(wèn)題，所以，今天咱們就來(lái)說(shuō)一下 異步請(qǐng)求的最佳實(shí)踐，幫助大家解決異步編程，以及面試問(wèn)題。
01：不使用 await 的循環(huán)請(qǐng)求
我們不應(yīng)該在循環(huán)內(nèi)使用 await。 而是可以利用 promise.all 方法：
// ?
async function fn(reqs) {
const results = [];
for (const req of reqs) {
// 每次循環(huán)迭代都會(huì)延遲到整個(gè)異步操作完成
results.push(await req);
}
return results;
}
// ?
async function fn(reqs) {
// 存儲(chǔ)所有異步操作的 Promise
const promises = reqs.map((req) => req);
// 所有異步操作都已經(jīng)開始，現(xiàn)在等待它們?nèi)客瓿? const results = await Promise.all(promises);
return results
}02：不要在 promise 中執(zhí)行返回操作
不要在 Promise 構(gòu)造函數(shù)中返回值。 從那里返回的值是無(wú)用的。 它們也不影響 Promise 的狀態(tài)。
- 正確的方法是使用 resolve 傳遞值。
- 如果有錯(cuò)誤，則使用 reject 傳遞錯(cuò)誤。
// ?
new Promise((resolve, reject) => {
// 返回沒(méi)有意義
if (b) {
return result;
}
});
// ?
new Promise((resolve, reject) => {
// 利用 resolve 傳遞
if (b) {
resolve(result);
return;
}
});03：避免競(jìng)態(tài)問(wèn)題
看以下代碼，你認(rèn)為最終打印會(huì)是多少？
// ?
let totalPosts = 0;
async function getPosts(userId) {
// 模擬獲取用戶的帖子數(shù)量
const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
// 模擬異步延遲
await sleep(Math.random() * 1000);
// 返回對(duì)應(yīng)用戶的帖子數(shù)量
return users.find((user) => user.id === userId).posts;
}
async function sleep (time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, time)
})
}
async function addPosts(userId) {
// 將用戶的帖子數(shù)量加到總帖子數(shù)上
totalPosts += await getPosts(userId);
}
// 并行地獲取兩個(gè)用戶的帖子數(shù)量，并在全部獲取完畢后輸出總帖子數(shù)
await Promise.all([addPosts(1), addPosts(2)]);
console.log('帖子數(shù)量:', totalPosts);執(zhí)行以上代碼，你可能會(huì)打印 3 或 5，而不是 8。
這個(gè)原因就是因?yàn)?競(jìng)態(tài)條件 問(wèn)題而導(dǎo)致的。當(dāng)在單獨(dú)的函數(shù)調(diào)用中更新值時(shí)，更新不會(huì)反映在當(dāng)前函數(shù)作用域中。 因此，這兩個(gè)函數(shù)都將其結(jié)果添加到初始的 TotalPosts 值 0 中。
以下是避免競(jìng)態(tài)條件的方式：
// ?
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('帖子數(shù)量:', totalPosts);04：避免回調(diào)地獄
這個(gè)問(wèn)題大家應(yīng)該很好理解，直接看代碼即可
// ?
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);05：避免直接返回 await
盡量避免直接返回 await ，特別是在需要 try..catch 的時(shí)候：
// ?
async () => {
try {
return await getUser(userId);
} catch (error) {
// 輸出錯(cuò)誤
}
}
// ?
async () => {
try {
const user = await getUser(userId);
return user;
} catch (error) {
// 輸出錯(cuò)誤
}
}06：reject 最好配合 Error 使用
// ?
Promise.reject('這是一個(gè)錯(cuò)誤');
// ?
Promise.reject(new Error('這是一個(gè)錯(cuò)誤'));
