JavaScript教程：深入理解Async/Await异步编程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00014/article/details/148552220

JavaScript教程：深入理解Async/Await异步编程

前言

在现代JavaScript开发中，异步编程是每个开发者必须掌握的核心概念。从早期的回调函数到Promise，再到如今广泛使用的async/await语法，JavaScript的异步处理方式不断演进。本文将深入探讨async/await的工作原理和使用技巧，帮助你写出更优雅、更易维护的异步代码。

什么是Async/Await

Async/await是基于Promise构建的语法糖，它让异步代码的编写和阅读变得更像同步代码。这种语法特性在ES2017(ES8)中被正式引入，现已成为处理异步操作的首选方式。

Async函数基础

要声明一个async函数，只需在普通函数前加上async关键字：

async function fetchData() {
  return "data";
}

关键特性：

async函数总是返回一个Promise
如果返回值不是Promise，它会被自动包装成已解决的Promise
如果抛出异常，返回的是被拒绝的Promise

示例：

async function getOne() {
  return 1;  // 等价于 return Promise.resolve(1)
}

getOne().then(alert); // 显示1

Await表达式

await关键字只能在async函数内部使用，它的作用是暂停函数执行，等待Promise解决：

async function example() {
  let result = await somePromise; // 等待promise解决
  console.log(result);
}

工作原理：

遇到await时，函数执行暂停
等待右侧的Promise解决
如果Promise成功解决，返回解决值
如果Promise被拒绝，抛出拒绝原因

示例：

async function showMessage() {
  let promise = new Promise(resolve => {
    setTimeout(() => resolve("Hello!"), 1000)
  });
  
  let message = await promise; // 等待1秒
  console.log(message); // "Hello!"
}

错误处理机制

async/await提供了更直观的错误处理方式，可以使用传统的try/catch结构：

async function fetchUser() {
  try {
    let response = await fetch('/user.json');
    let user = await response.json();
    return user;
  } catch(err) {
    console.error("请求失败:", err);
    // 可以返回默认值或重新抛出错误
    return {name: "默认用户"};
  }
}

重要区别：

未捕获的await错误会导致async函数返回被拒绝的Promise
可以使用.catch()处理，但try/catch通常更清晰

高级用法

并行执行多个异步操作

当需要同时执行多个独立操作时，可以结合Promise.all使用：

async function loadResources() {
  let [user, products] = await Promise.all([
    fetch('/user'),
    fetch('/products')
  ]);
  
  // 两个请求都完成后继续执行
  console.log(user, products);
}

在类中使用async方法

类方法也可以声明为async：

class ApiClient {
  async getData() {
    let response = await fetch('/api/data');
    return response.json();
  }
}

处理Thenable对象

await不仅能处理Promise，还能处理任何具有.then()方法的对象（Thenable）：

class CustomThenable {
  constructor(value) {
    this.value = value;
  }
  
  then(resolve) {
    setTimeout(() => resolve(this.value * 2), 1000);
  }
}

async function test() {
  let result = await new CustomThenable(10);
  console.log(result); // 20 (1秒后)
}