深入理解 Async/Await：现代 JavaScript 异步编程的优雅解决方案

在现代 JavaScript 开发中，异步编程是一个无法回避的话题。从早期的回调函数到 Promise，再到 Generator 函数，JavaScript 一直在探索更优雅的异步编程解决方案。而 async/await 的出现，可以说是 JavaScript 异步编程领域的一次重大突破，它让异步代码的书写和阅读变得更加直观和简洁。

什么是 Async 函数？

Async 函数实际上是 Generator 函数的语法糖，但它在多个方面进行了重要优化，使得异步编程变得更加简单和直观。

内置执行器

与 Generator 函数需要额外的执行器（如 co 模块）不同，async 函数内置了执行器，可以像普通函数一样直接调用：

javascript

复制下载

async function fn() {
  return '张三';
}

const result = fn(); // 直接调用，无需额外执行器
console.log(result); // Promise {<fulfilled>: '张三'}

更好的语义

从字面上看，async 和 await 关键字直接表达了异步操作的语义。async 表示函数内部有异步操作，await 表示需要等待一个异步操作的完成。这种直观的表达方式大大提高了代码的可读性。

更广的适用性

await 命令后面不仅可以跟 Promise 对象，还可以跟原始类型的值（数值、字符串、布尔值等），这时这些值会被自动转成立即 resolve 的 Promise 对象：

javascript

复制下载

async function f() {
  const a = await 'hello'; // 等同于 await Promise.resolve('hello')
  const b = await 123;     // 等同于 await Promise.resolve(123)
  return a + b;
}

f().then(console.log); // 'hello123'

返回值是 Promise

async 函数总是返回一个 Promise 对象，这意味着我们可以使用 then 方法链式处理异步操作的结果：

javascript

复制下载

async function fn() {
  return '张三';
}

fn().then(value => {
  console.log(value); // '张三'
});

Async 函数的返回值详解

async 函数的返回值行为有几种不同的情况，理解这些细节对于正确使用 async 函数至关重要。

返回非 Promise 类型的对象

当 async 函数返回一个非 Promise 类型的对象时，返回值会被包装成一个成功状态的 Promise 对象：

javascript

复制下载

async function fn() {
  return '张三';
}

const result = fn();
console.log(result); // Promise {<fulfilled>: '张三'}

fn().then(value => {
  console.log(value); // '张三'
});

抛出错误

当 async 函数内部抛出错误时，返回值是一个失败状态的 Promise：

javascript

复制下载

async function fn() {
  throw new Error('出错了');
}

const result = fn();
console.log(result); // Promise {<rejected>: Error: 出错了}

fn().then(
  value => console.log(value),
  reason => console.log(reason) // Error: 出错了
);

返回 Promise 对象

当 async 函数返回一个 Promise 对象时，该 Promise 对象的状态决定了 async 函数返回的 Promise 状态：

javascript

复制下载

async function fn() {
  return new Promise((resolve, reject) => {
    // resolve('成功了');
    reject('失败了');
  });
}

const result = fn();
console.log(result); // Promise {<rejected>: '失败了'}

fn().then(
  value => console.log(value),
  reason => console.log(reason) // '失败了'
);

Await 表达式的深入理解

await 表达式是 async/await 的核心，它只能在 async 函数内部使用，具有以下几个重要特性。

等待 Promise 完成

await 后面通常跟一个 Promise 对象，它会暂停 async 函数的执行，等待 Promise 完成，然后返回 Promise 的成功值：

javascript

复制下载

const p = new Promise((resolve, reject) => {
  resolve('成功了');
  // reject('失败了');
});

async function f1() {
  const result = await p;
  console.log(result); // '成功了'
}
f1();

错误处理

当 await 后面的 Promise 变为拒绝状态时，await 表达式会抛出异常，需要通过 try...catch 结构来捕获：

javascript

复制下载

const p = new Promise((resolve, reject) => {
  reject('失败了');
});

async function f2() {
  try {
    const result = await p;
    console.log(result);
  } catch(err) {
    console.log(err); // '失败了'
  }
}
f2();

等待 Thenable 对象

await 后面不仅可以跟 Promise 对象，还可以跟任何定义了 then 方法的对象（thenable 对象），await 会将其视为 Promise 对象来处理：

javascript

复制下载

class Sleep {
  constructor(timeout) {
    this.timeout = timeout;
  }
  then(resolve, reject) {
    const startTime = Date.now();
    setTimeout(() => {
      resolve(Date.now() - startTime);
    }, this.timeout);
  }
}

(async () => {
  const sleepTime = await new Sleep(1000);
  console.log(sleepTime); // 大约 1000
})();

这种特性使得我们可以创建自定义的异步操作，只要对象实现了 then 方法，就可以与 await 一起使用。

错误处理策略

在 async 函数中，错误处理是一个需要特别注意的方面。

中断执行的问题

默认情况下，任何一个 await 语句后面的 Promise 对象变为 reject 状态，那么整个 async 函数都会中断执行：

javascript

复制下载

async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}

防止中断执行的策略

有时我们希望即使前一个异步操作失败，也不要中断后面的异步操作。这时可以将 await 放在 try...catch 结构里面：

javascript

复制下载

async function f() {
  try {
    await Promise.reject('出错了');
  } catch (e) {
    // 捕获错误，但不中断执行
  }
  return await Promise.resolve('hello world');
}

f().then(v => console.log(v)); // 'hello world'

实际应用场景

文件读取

async/await 在处理多个顺序执行的异步操作时特别有用，比如文件读取：

// 模拟文件读取函数
function read1() {
  return new Promise((resolve, reject) => {
    // 模拟异步文件读取
    setTimeout(() => {
      resolve('文件1的内容');
    }, 1000);
  })
}

function read2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('文件2的内容');
    }, 1000);
  })
}

function read3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('文件3的内容');
    }, 1000);
  })
}

async function main() {
  try {
    const result1 = await read1();
    console.log(result1);
    const result2 = await read2();
    console.log(result2);
    const result3 = await read3();
    console.log(result3);
  } catch(err) {
    console.log(err);
  }
}

main();

并发执行优化

虽然上面的例子展示了顺序执行异步操作，但在实际开发中，如果多个异步操作之间没有依赖关系，我们可以使用 Promise.all 来并发执行，提高效率：

javascript

复制下载

async function main() {
  try {
    const [result1, result2, result3] = await Promise.all([
      read1(),
      read2(),
      read3()
    ]);
    console.log(result1, result2, result3);
  } catch(err) {
    console.log(err);
  }
}

Async/Await 与传统异步方案的对比

与 Promise 链的对比

使用传统的 Promise 链：

javascript

复制下载

function fetchData() {
  return fetch('/api/data1')
    .then(response => response.json())
    .then(data1 => {
      return fetch('/api/data2')
        .then(response => response.json())
        .then(data2 => {
          return { data1, data2 };
        });
    });
}

使用 async/await：

javascript

复制下载

async function fetchData() {
  const response1 = await fetch('/api/data1');
  const data1 = await response1.json();
  
  const response2 = await fetch('/api/data2');
  const data2 = await response2.json();
  
  return { data1, data2 };
}

可以看到，async/await 版本的代码更加直观，逻辑更加清晰。

与 Generator 函数的对比

使用 Generator 函数处理异步：

javascript

复制下载

function* fetchData() {
  const response1 = yield fetch('/api/data1');
  const data1 = yield response1.json();
  
  const response2 = yield fetch('/api/data2');
  const data2 = yield response2.json();
  
  return { data1, data2 };
}

// 需要执行器
function run(generator) {
  const iterator = generator();
  
  function iterate(iteration) {
    if (iteration.done) return iteration.value;
    const promise = iteration.value;
    return promise.then(result => iterate(iterator.next(result)));
  }
  
  return iterate(iterator.next());
}

run(fetchData);

使用 async/await：

javascript

复制下载

async function fetchData() {
  const response1 = await fetch('/api/data1');
  const data1 = await response1.json();
  
  const response2 = await fetch('/api/data2');
  const data2 = await response2.json();
  
  return { data1, data2 };
}

// 直接调用
fetchData();

明显可以看出，async/await 方案更加简洁，无需额外的执行器。

最佳实践和注意事项

1. 始终处理错误

在使用 async/await 时，不要忘记错误处理。可以使用 try...catch 结构，或者使用 .catch() 方法：

javascript

复制下载

// 方式一：使用 try...catch
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error; // 或者返回默认值
  }
}

// 方式二：使用 .catch()
fetchData().catch(error => {
  console.error('获取数据失败:', error);
});

2. 避免不必要的 await

不要滥用 await，只有在需要等待异步操作完成时才使用它：

javascript

复制下载

// 不推荐
async function example() {
  const a = await 1; // 不必要的 await
  const b = await 2; // 不必要的 await
  return a + b;
}

// 推荐
async function example() {
  const a = 1;
  const b = 2;
  return a + b;
}

3. 合理使用并发

当多个异步操作之间没有依赖关系时，应该并发执行它们，而不是顺序执行：

// 不推荐 - 顺序执行
async function fetchSequential() {
  const user = await fetchUser();
  const posts = await fetchPosts();
  const comments = await fetchComments();
  return { user, posts, comments };
}

// 推荐 - 并发执行
async function fetchConcurrent() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchComments()
  ]);
  return { user, posts, comments };
}

总结

Async/await 是 JavaScript 异步编程的重大进步，它通过更加直观和简洁的语法，让我们能够以近乎同步的方式编写异步代码，同时保持了异步操作的非阻塞特性。

从本质上讲，async 函数是 Generator 函数的语法糖，但它通过内置执行器、更好的语义、更广的适用性和 Promise 返回值等优化，大大提升了开发体验。await 表达式则让我们能够以同步的方式编写异步逻辑，使代码更加清晰易读。