原生 JavaScript 中的 Async 和 Await
过去几年，我经常在个人项目和主要工作中使用 Blazor WebAssembly。有时
我需要调用一些 JavaScript 代码来执行特定操作。
在这种情况下，我从不使用任何特定的 JavaScript 框架，因此很多功能都必须用原生 JavaScript 实现。
如果你曾经在 JavaScript 中编写过异步代码，你可能知道处理回调、Promise 和错误有多么棘手。幸运的是，有一个语法特性可以让你的工作变得轻松许多：async 和 await。
`async` 和 `await` 是关键字，它们能让你以更易读、更简洁的方式编写异步代码。它们基于 Promise，但可以避免嵌套和链式调用 `then()` 和 `catch()` 方法。你可以使用 `await` 关键字来暂停异步函数的执行，直到 Promise 被解析或拒绝。这样，你就可以像编写同步代码一样编写异步代码了。
如何使用 async 和 await
要使用 async 和 await，你需要做两件事：
- 在函数名或箭头函数之前使用 async 关键字声明异步函数。
- 在异步函数中使用 await 关键字来等待 Promise 被解析或拒绝。
以下是一个简单的异步函数示例，该函数从 API 获取一些数据并将结果记录到控制台中：
async function fetchData() {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let data = await response.json();
console.log(data);
}
// Call the async function
fetchData();
注意，这段代码看起来像是同步代码，尽管它执行的是异步操作。`await` 关键字会让 JavaScript 引擎暂停异步函数的执行，直到 Promise 被解析。然后，它会使用 Promise 的解析值恢复执行。
你也可以像在同步代码中一样，使用 try...catch 块来处理异步函数中的错误。例如：
async function fetchData() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
let data = await response.json();
console.log(data);
} catch (error) {
// Handle the error
console.error(error);
}
}
async 和 await 的优点
使用 async 和 await 可以给代码质量和可读性带来诸多好处：
- 它减少了使用 Promise 和回调函数所带来的样板代码和缩进。
- 它使代码更加线性、更加直观，因为它遵循了自然的执行流程。
- 它改进了错误处理，因为您可以使用标准的 try...catch 块而不是 catch() 方法或拒绝回调。
- 这样更容易调试代码，因为你可以使用断点并像同步代码一样逐步执行代码。
async 和 await 的缺点
虽然 async 和 await 是非常实用且强大的功能，但它们也有一些需要注意的缺点：
- await 只能在异步函数内部使用。如果在异步函数外部使用，将会出现语法错误。
- 异步函数总是返回一个 Promise 对象，即使你没有显式地返回它。这意味着你需要使用 `then()` 或 `await` 来获取异步函数的返回值。
- 使用 await 会阻塞当前异步函数的执行，但不会阻塞整个程序。其他不依赖于 await 的 Promise 的函数或事件仍会在后台运行。
- 你应该避免在循环或并行任务中使用 await，因为它会导致代码顺序执行而不是并发执行。你应该使用 Promise.all() 或 Promise.race() 来同时等待多个 Promise 完成。
您可以在这里找到有关 Promise.all() 和 Promise.race() 的更多信息。
结论
使用 async 和 await 可以提高代码质量和可读性，并改善错误处理和调试体验。但是，它们也有一些需要注意的地方，例如只能在异步函数中使用，必须正确处理它们的返回值，并且避免在循环或并行任务中使用。
如果您想了解更多关于 async 和 await 的信息，可以查看以下链接：MDN Web Docs：异步函数
您是否对学习 GitHub 感兴趣，但不知道从哪里开始？不妨试试我在 LinkedIn Learning 上的课程：学习 GitHub。
感谢阅读这篇文章，希望您觉得有趣！
欢迎关注我，这样就能在新文章发布时收到通知啦🙂
文章来源：https://dev.to/this-is-learning/async-and-await-in-vanilla-javascript-2mep