一招轻松搞定异步函数 async、await

2022-11-11 15:09:33

用 async 和 await 简化 JavaScript 中的异步编程

引言

在现代网络应用程序开发中，异步编程已经成为必不可少的技术。JavaScript 提供了强大的功能，例如 async 和 await，它们可以让你处理异步操作，而无需陷入回调地狱。本文将深入探究 async 和 await 的工作原理、使用场景和优势，帮助你提升 JavaScript 异步编程技能。

async 和 await：简介

async 函数

async 函数是一种特殊的函数，它允许你编写异步代码，而无需使用回调函数或 Promise。async 函数的语法与普通函数相似，但在函数名前面加上 async 。

async function myAsyncFunction() {
  // 异步操作
}

await 关键字

await 关键字用于暂停函数执行，直到异步操作完成。它可以放在任何返回 Promise 的表达式的前面。

async function myAsyncFunction() {
  const result = await fetch('https://example.com');
  // 使用 result
}

在上面的示例中，await fetch('https://example.com') 会等待 fetch 操作完成，然后将结果存储在 result 变量中。

await 等待的内容

await 可以等待任何可以返回 Promise 的表达式。这包括：

Promise 对象
XMLHttpRequest 对象
fetch() 调用
等等

await Promise 对象

当 await 一个 Promise 对象时，await 会等待 Promise 对象的状态变为 resolved 或 rejected。如果 Promise 对象的状态变为 resolved，await 会返回 Promise 对象的值。如果 Promise 对象的状态变为 rejected，await 会抛出 Promise 对象的错误。

await XMLHttpRequest 对象

当 await 一个 XMLHttpRequest 对象时，await 会等待 XMLHttpRequest 对象的状态变为 DONE。当 XMLHttpRequest 对象的状态变为 DONE 时，await 会返回 XMLHttpRequest 对象的 responseText 属性的值。

await fetch() 调用

当 await 一个 fetch() 调用时，await 会等待 fetch() 调用的 Promise 对象的状态变为 resolved 或 rejected。如果 fetch() 调用的 Promise 对象的状态变为 resolved，await 会返回 fetch() 调用的 Promise 对象的值。如果 fetch() 调用的 Promise 对象的状态变为 rejected，await 会抛出 fetch() 调用的 Promise 对象的错误。

使用场景

async 和 await 可用于处理各种异步操作，例如：

从服务器获取数据
发送表单数据
加载图片或视频
定时任务
动画效果
游戏开发

优势

使用 async 和 await 的主要优势包括：

提高代码可读性和可维护性： async 和 await 使异步代码更易于理解和维护，因为它们消除了回调函数的嵌套。
避免回调地狱： 回调地狱是指嵌套多个回调函数，这会导致代码难以理解和调试。async 和 await 可以帮助你避免回调地狱。
提高代码可测试性： async 和 await 使编写异步代码的测试变得更容易。

注意事项

使用 async 和 await 时需要注意以下几点：

await 只能在 async 函数中使用。
await 不能与其他异步操作（如回调函数或 Promise）同时使用。
await 只能等待一个表达式。
await 会阻塞当前线程，直到异步操作完成。

代码示例

以下是一个使用 async 和 await 从服务器获取数据的示例：

async function getData() {
  const response = await fetch('https://example.com/api/data');
  const data = await response.json();
  console.log(data);
}