「如果你在使用 _await_ 時(shí)遇到過"undefined is not a function"的錯(cuò)誤提示，別擔(dān)心——你并不孤單?！?nbsp;Async/Await功能強(qiáng)大，但也是現(xiàn)代JavaScript中最容易被誤解的特性之一。

即使是經(jīng)驗(yàn)豐富的開發(fā)者也會(huì)陷入一些微妙陷阱，導(dǎo)致未處理的Promise、靜默失敗或混亂的調(diào)用堆棧。讓我們深入剖析，幫你真正掌握這項(xiàng)技術(shù)。

?? 工程師們普遍面臨的問題

Async/await看起來簡單易懂，但很多工程師：

• 不知道await只能在async函數(shù)中使用
• 忘記用try/catch處理錯(cuò)誤
• 在循環(huán)中使用await導(dǎo)致性能下降
• 混淆await和then()的用法

聽起來耳熟嗎？別擔(dān)心——這些問題都有解決方案。

解決方案1：確保在Async函數(shù)中使用await

最常見的錯(cuò)誤就是在非async上下文中使用await。

// ? 錯(cuò)誤示范
const data = await fetchData(); // 會(huì)報(bào)SyntaxError

// ? 正確做法
async function loadData() {
  const data = await fetchData();
}

?? 黃金法則：使用await時(shí)，必須將其包裹在async函數(shù)中。

??? 解決方案2：使用try/catch處理錯(cuò)誤

await可能會(huì)像throw語句一樣拋出錯(cuò)誤，絕不能忽視錯(cuò)誤處理。

// ? 這種寫法可能導(dǎo)致靜默失敗
const res = await fetch("/api/data");

// ? 正確做法
try {
  const res = await fetch("/api/data");
  const data = await res.json();
} catch (error) {
  console.error("請(qǐng)求出錯(cuò)：", error);
}

?? 進(jìn)階技巧：可以創(chuàng)建一個(gè)錯(cuò)誤處理包裝器來優(yōu)雅地處理錯(cuò)誤。

解決方案3：避免在循環(huán)中使用await

在循環(huán)中使用await會(huì)導(dǎo)致順序執(zhí)行，大幅降低性能。

// ? 低效循環(huán)
for (let id of userIds) {
  const user = await fetchUser(id); // 每次都要等待
}

// ? 優(yōu)化方案：并行執(zhí)行
const users = await Promise.all(userIds.map(id => fetchUser(id)));

?? 性能貼士：盡可能使用Promise.all()實(shí)現(xiàn)并行操作。

解決方案4：不要混用then()和await

混合使用兩種模式會(huì)導(dǎo)致代碼混亂和可讀性問題。

// ? 避免這種混合寫法
const data = await fetchData().then(res => res.json());

// ? 保持風(fēng)格統(tǒng)一
const res = await fetchData();
const data = await res.json();

?? 堅(jiān)持使用async/await能讓代碼更清晰，調(diào)試更輕松。

核心要點(diǎn)總結(jié)

? await只能在async函數(shù)中使用
? 用try/catch包裹await調(diào)用
? 避免在循環(huán)中使用await——改用Promise.all()? 不要無謂地混用await和.then()

? 想讓你的文章也像這篇一樣火爆嗎？

這篇文章之所以能成為Medium熱門文章，主要?dú)w功于以下要素：

吸睛標(biāo)題

我們采用了一個(gè)引人點(diǎn)擊、激發(fā)好奇的標(biāo)題，直擊開發(fā)者痛點(diǎn)。

強(qiáng)力開場

開篇就點(diǎn)出常見挫敗感，立即抓住讀者注意力。

簡潔排版

• 短小精悍的段落
• 代碼片段展示
• 重點(diǎn)內(nèi)容加粗

實(shí)用建議

提供真實(shí)案例和即學(xué)即用的解決方案。

SEO優(yōu)化標(biāo)簽

JavaScript、Async/Await、編程、Web開發(fā)、軟件工程

促進(jìn)互動(dòng)的CTA

原文鏈接：https://medium.com/devinsight/why-90-of-engineers-struggle-with-async-await-and-how-to-fix-it-6f3fa5cb8ca5
作者：Dipak Ahirav