async await 的 async 特性解读与 await 关键字剖析

前端

2023-12-22 08:24:01

async 函数：古老灵魂的新装扮

async 函数的实质是一股清流，一曲将传统 JavaScript 编程范式改头换面的交响曲。它为 JavaScript 带来了异步编程的曙光，为开发者提供了更加优雅、高效的解决方案。

理解 async 特性

理解 async 函数，首先要认识 async 特性。async 特性如同魔术师手中的法杖，为函数赋予了异步处理的能力，赋予了程序同时处理多个任务的灵活性，彻底改变了 JavaScript 的编程模式。

await 让异步化进程如丝般顺滑

await 是 async 函数中的关键角色，它负责暂停函数的执行，直到异步操作完成。await 可以等待 Promise 对象、XMLHttpRequest 对象或其他任何异步操作的结果。

通过代码诠释 async 函数

代码能够帮助我们更好理解 async 函数的妙用。以下是一个简单的代码示例：

async function fetchUserData() {
  const response = await fetch('https://example.com/user-data.json');
  const data = await response.json();
  return data;
}

在这个例子中，fetchUserData 函数被标记为 async，它首先调用 fetch() 函数来获取用户数据，然后使用 await 关键字暂停函数的执行，等待 fetch 操作完成。接下来，函数继续执行，使用 await 关键字暂停执行，等待 JSON 数据解析完成。最后，函数返回解析后的用户数据。

async 函数与传统函数的对比

async 函数与传统函数之间存在显着的差异，这些差异是理解 async 函数的关键。

函数执行方式： async 函数是异步执行的，而传统函数是同步执行的。这意味着 async 函数不会阻塞主线程，而传统函数会阻塞主线程。
返回结果： async 函数返回一个 Promise 对象，而传统函数返回一个普通的值。Promise 对象代表异步操作的结果，它允许我们使用 then() 方法来处理异步操作的结果。