用 ES6 掌握异步编程的精髓：Promise、async 与 await

2024-01-03 22:12:39

ES6 异步编程：用 Promise、async 和 await 简化代码

在现代 Web 开发中，异步编程至关重要。它让我们可以在不阻塞主线程的情况下执行耗时操作，从而提升应用程序的响应速度和用户体验。ES6 为 JavaScript 引入了强大的异步编程特性，包括 Promise、async 和 await，它们显著简化了异步操作的处理，让代码更优雅、可读性更强。

Promise：管理异步操作

Promise 是 ES6 中用于处理异步操作的类。它代表着一个异步操作的结果，提供了统一的方式处理成功和失败两种情况。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

promise.then(result => {
  // 成功回调
}, error => {
  // 失败回调
});

async 和 await：简化异步语法

async 和 await 旨在简化异步编程的语法。async 可以修饰函数，使其成为异步函数。await 可以用来等待异步操作完成，并获取其结果。

async function myAsyncFunction() {
  const result = await Promise.resolve(1);
  return result;
}

myAsyncFunction().then(result => {
  console.log(result); // 1
});

异步场景

异步编程在实际项目中经常用于各种场景，例如：

网络请求
文件读写
定时器
事件监听

同时下载：一个示例

想象一个程序允许用户输入电影名称并下载。程序一次只能下载一部电影，下载完成一部才能开始下一部的下载。下载成功和失败都会有相关提示。

const downloadMovie = (movieName) => {
  return new Promise((resolve, reject) => {
    // 下载电影
    if (success) {
      resolve(movieName);
    } else {
      reject(new Error('下载失败'));
    }
  });
};

async function main() {
  const movieNames = ['movie1', 'movie2', 'movie3'];

  for (const movieName of movieNames) {
    try {
      const result = await downloadMovie(movieName);
      console.log(`下载成功：${result}`);
    } catch (error) {
      console.log(`下载失败：${error.message}`);
    }
  }
}

main();