ES8 新特性之 async/await 异步编程模式的使用方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程是非常常见的需求。ES8 引入了 async/await，这是一种新的异步编程模式，可以让异步编程的代码更加简洁和易于理解。本文将详细介绍 async/await 的使用方法，包括如何声明和调用异步函数，如何处理异步函数的返回值和异常情况等。

async/await 简介

async/await 是 ES8 中的新特性，它是基于 Promise 的异步编程模式的进一步封装和简化。async 函数用于声明异步函数，它会返回一个 Promise 对象。在 async 函数内部，可以使用 await 关键字来等待异步操作完成，然后获取异步操作的结果。使用 async/await 可以让异步代码看起来像同步代码，更加易于理解和维护。

声明异步函数

异步函数的声明方式和普通函数一样，只需要在函数前面加上 async 关键字即可。异步函数内部可以包含任意数量的异步操作，每一个异步操作都应该返回一个 Promise 对象。下面是一个简单的异步函数的示例：

async function loadImage(url) {
  const image = new Image();
  image.src = url;
  await new Promise(resolve => {
    image.onload = resolve;
  });
  return image;
}

上面的 loadImage 函数用于加载一张图片，它会返回一个 Promise 对象。在函数内部，首先创建了一个 Image 对象，并将其 src 属性设置为指定的图片 URL。然后使用 Promise 对象封装了 image.onload 事件，等待该事件触发后 Promise 对象会被 resolve，表示异步操作完成。最后将加载的图片对象返回给调用方。

调用异步函数

异步函数的调用方式和普通函数也是一样的，只需要像调用普通函数一样调用异步函数即可。在调用异步函数时，函数会立即返回一个 Promise 对象，该 Promise 对象在异步操作完成后会被 resolve，resolve 的值为异步函数的返回值。下面是一个调用异步函数的示例：

loadImage('https://example.com/image.png').then(image => {
  console.log('Image loaded:', image);
}).catch(error => {
  console.error('Failed to load image:', error);
});

上面的代码调用了 loadImage 函数，然后使用 Promise 对象的 then 方法和 catch 方法处理异步函数的返回值和异常情况。当异步函数成功完成时，then 方法会被调用，传入异步函数的返回值。当异步函数失败时，catch 方法会被调用，传入一个 Error 对象，表示异步操作失败的原因。

处理异步函数的返回值和异常情况

使用 async/await 可以让异步代码看起来像同步代码，更加易于理解和维护。在异步函数内部使用 await 关键字可以等待异步操作完成，然后获取异步操作的返回值。如果异步操作失败，await 关键字会抛出一个异常，可以使用 try/catch 语句来捕获该异常。下面是一个使用 async/await 处理异步函数的返回值和异常情况的示例：

// javascriptcn.com 代码示例
async function loadImage(url) {
  const image = new Image();
  image.src = url;
  try {
    await new Promise((resolve, reject) => {
      image.onload = resolve;
      image.onerror = reject;
    });
    return image;
  } catch (error) {
    console.error('Failed to load image:', error);
    throw error;
  }
}

async function run() {
  try {
    const image = await loadImage('https://example.com/image.png');
    console.log('Image loaded:', image);
  } catch (error) {
    console.error('Failed to load image:', error);
  }
}

run();

上面的代码使用 try/catch 语句捕获了 loadImage 函数可能抛出的异常。在 loadImage 函数内部，使用 await 关键字等待异步操作完成，如果异步操作失败，await 关键字会抛出一个异常，然后被 try/catch 语句捕获。在 run 函数中，使用 await 关键字等待 loadImage 函数完成，然后获取异步操作的返回值。如果异步操作失败，run 函数会抛出一个异常，然后被 try/catch 语句捕获。

总结

async/await 是 ES8 中的新特性，它是基于 Promise 的异步编程模式的进一步封装和简化。使用 async/await 可以让异步代码看起来像同步代码，更加易于理解和维护。在使用 async/await 时，需要声明异步函数并返回一个 Promise 对象，然后在函数内部使用 await 关键字等待异步操作完成，获取异步操作的返回值。如果异步操作失败，await 关键字会抛出一个异常，可以使用 try/catch 语句来捕获该异常。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6555ad5fd2f5e1655d005642