JS `async/await`：基于 Promise 的更简洁异步语法

各位观众老爷，大家好！今天咱们聊聊 JavaScript 里让异步编程变得像同步一样简单的秘密武器：async/await。

开场白：异步编程的那些糟心事

话说，写 JavaScript 代码，尤其是涉及到网络请求、文件读写这些耗时操作，那就绕不开异步编程。以前，咱们用回调函数，层层嵌套，回调地狱那是家常便饭，代码可读性直线下降，维护起来简直是噩梦。后来有了 Promise，虽然解决了回调地狱，但 .then().then().then() 链式调用，写多了也让人眼花缭乱，逻辑稍微复杂一点，还是容易迷失在代码的海洋里。

async/await：Promise 的完美搭档

async/await 其实就是 Promise 的语法糖，它建立在 Promise 之上，让我们可以用更像同步代码的方式来处理异步操作。简单来说，async 关键字用于声明一个异步函数，而 await 关键字用于等待一个 Promise 对象 resolve。

async 关键字：声明异步函数

async 关键字放在函数声明的前面，表示这个函数是一个异步函数。异步函数会自动返回一个 Promise 对象。如果函数内部显式地 return 一个值，那么这个值会被 Promise.resolve() 包装成一个 resolved 的 Promise 对象。如果函数内部抛出错误，那么这个错误会被 Promise.reject() 包装成一个 rejected 的 Promise 对象。

async function fetchData() {
  return 'Data fetched successfully!';
}

fetchData().then(result => {
  console.log(result); // Output: Data fetched successfully!
});

async function fetchDataWithError() {
  throw new Error('Failed to fetch data.');
}

fetchDataWithError().catch(error => {
  console.error(error.message); // Output: Failed to fetch data.
});

await 关键字：等待 Promise resolve

await 关键字只能在 async 函数内部使用。它用于等待一个 Promise 对象 resolve。当 await 遇到一个 Promise 对象时，会暂停当前 async 函数的执行，直到 Promise 对象 resolve 或者 reject。

如果 Promise 对象 resolve，await 表达式会返回 Promise 对象 resolve 的值。
如果 Promise 对象 reject，await 表达式会抛出一个错误。

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function printAfterDelay(message, ms) {
  console.log('Starting...');
  await delay(ms); // 等待 delay(ms) 这个 Promise resolve
  console.log(message);
  console.log('Finished!');
}

printAfterDelay('Hello, world!', 2000);
// Output (after 2 seconds):
// Starting...
// Hello, world!
// Finished!

async/await 的优势：

代码可读性更高： 异步代码看起来更像同步代码，更容易理解和维护。
错误处理更方便： 可以使用 try...catch 语句来捕获异步操作中的错误。
调试更简单： 可以像调试同步代码一样调试异步代码。

async/await 的实际应用：

咱们来几个实际点的例子，看看 async/await 在实际开发中是怎么发挥作用的。

1. 模拟网络请求：

function fakeFetch(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.2) {
        resolve({
          status: 200,
          data: `Data from ${url}`
        });
      } else {
        reject(new Error('Failed to fetch data.'));
      }
    }, 1000);
  });
}

async function getData(url) {
  try {
    const response = await fakeFetch(url);
    console.log(`Status: ${response.status}`);
    console.log(`Data: ${response.data}`);
  } catch (error) {
    console.error(`Error: ${error.message}`);
  }
}

getData('https://example.com/api/data');

在这个例子中，fakeFetch 函数模拟了一个网络请求，getData 函数使用 async/await 来等待请求完成，并处理返回的数据或错误。

2. 处理多个异步请求：

async function fetchMultipleData() {
  try {
    const data1 = await fakeFetch('https://example.com/api/data1');
    const data2 = await fakeFetch('https://example.com/api/data2');
    const data3 = await fakeFetch('https://example.com/api/data3');

    console.log('Data 1:', data1.data);
    console.log('Data 2:', data2.data);
    console.log('Data 3:', data3.data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

fetchMultipleData();

这个例子展示了如何使用 async/await 来顺序处理多个异步请求。每个请求都会等待前一个请求完成后再执行。

3. 并行处理多个异步请求：

如果多个异步请求之间没有依赖关系，可以并行执行它们，以提高效率。可以使用 Promise.all() 方法来实现并行执行。

async function fetchMultipleDataParallel() {
  try {
    const [data1, data2, data3] = await Promise.all([
      fakeFetch('https://example.com/api/data1'),
      fakeFetch('https://example.com/api/data2'),
      fakeFetch('https://example.com/api/data3')
    ]);

    console.log('Data 1:', data1.data);
    console.log('Data 2:', data2.data);
    console.log('Data 3:', data3.data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

fetchMultipleDataParallel();

在这个例子中，Promise.all() 方法会并发执行所有的 fakeFetch 请求，并在所有请求都完成后 resolve。如果其中任何一个请求 reject，Promise.all() 也会 reject。

async/await 错误处理：

使用 try...catch 语句可以方便地捕获 async 函数内部的错误。

async function fetchDataWithErrorHandling() {
  try {
    const response = await fakeFetch('https://example.com/api/data');
    console.log('Data:', response.data);
  } catch (error) {
    console.error('Error:', error.message);
  } finally {
    console.log('Cleanup operations.'); // finally 块总是会执行
  }
}

fetchDataWithErrorHandling();

finally 块中的代码无论是否发生错误都会执行，通常用于执行一些清理操作。

总结：async/await 的优势与限制

特性	优点	缺点
代码可读性	显著提高，代码更像同步代码，易于理解和维护	无
错误处理	方便使用 `try...catch` 语句捕获异步操作中的错误，使错误处理更加集中和清晰	无
调试	可以像调试同步代码一样调试异步代码，更容易定位问题	无
并行处理	可以结合 `Promise.all()` 实现并行处理，提高效率	需要手动管理 Promise 对象，不如 RxJS 等响应式编程库的自动管理机制强大
适用场景	适用于需要顺序执行多个异步操作，或者需要对异步操作进行精细控制的场景	不适合处理复杂的、连续的异步数据流，在这种场景下，响应式编程库（如 RxJS）可能更合适
兼容性	现代浏览器和 Node.js 都支持 `async/await`，但对于旧版本浏览器，可能需要使用 Babel 等工具进行转译	需要注意兼容性问题，特别是对于需要支持旧版本浏览器的项目
性能	在大多数情况下，`async/await` 的性能与 Promise 相当，甚至可能略优，因为它避免了 Promise 链式调用带来的额外开销	在某些极端情况下，`async/await` 的性能可能不如手动编写的 Promise 代码，但这种差异通常可以忽略不计
依赖性	依赖于 Promise，必须先理解 Promise 的基本概念和用法	需要一定的学习成本，特别是对于不熟悉 Promise 的开发者
代码简洁性	显著提高，减少了回调函数的嵌套和 `.then()` 链式调用，使代码更加简洁和易于阅读	无
异步操作控制	可以更精确地控制异步操作的执行顺序和时机，例如，可以在 `async` 函数内部使用 `if` 语句和 `for` 循环来控制异步操作的执行流程	相比于基于回调函数的异步编程，`async/await` 在控制异步操作的灵活性方面有所限制，例如，无法像回调函数那样在异步操作完成后立即执行某个函数

async/await 的一些注意事项：

await 关键字只能在 async 函数内部使用。
async 函数总是返回一个 Promise 对象。
要处理 async 函数内部的错误，可以使用 try...catch 语句。
async/await 只是 Promise 的语法糖，它并没有改变 JavaScript 的异步编程模型。

总结：

async/await 是 JavaScript 中一个非常强大的异步编程工具，它可以让我们的代码更简洁、更易读、更易维护。掌握 async/await，可以大大提高我们的开发效率和代码质量。

结束语：

希望今天的讲座能帮助大家更好地理解和使用 async/await。记住，多多练习，才能真正掌握这项技术。祝大家编程愉快！

发表回复 取消回复

发表回复取消回复