ECMAScript 2017（ES8）中的 Async 函数解析及使用方式介绍-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程是非常常见的，而 ES8 中的 Async 函数是一种更加方便的异步编程方式。本文将对于 ES8 中的 Async 函数进行解析及使用方式介绍，旨在让读者了解到 Async 函数的深度及使用技巧。

什么是 Async 函数

Async 函数是基于 Promise 的一种语法糖，是 Generator 函数的语法升级版本，使得异步操作更加方便与直观。它能够将一个函数变为异步，让函数在执行过程中遇到 await 关键字就会停止执行，等待异步操作完成后再继续执行。与传统回调函数相比，Async 函数的代码可读性更强，也更方便维护。以下是 Async 函数的基本语法：

async function doSomething() {
  await doSomethingAsync();
}

可以看出，在 Async 函数的语法中，函数名前有 async 关键字，await 可以用于等待异步代码执行的结果，而异步操作需要返回一个 Promise 对象。此外，Async 函数可以直接返回一个 Promise 对象。

使用方法

在使用 Async 函数时，需要注意以下几点：

1. 函数内部可以使用 await 关键字

在 Async 函数内部，可以通过 await 关键字来等待异步操作的结果。比如，以下代码中的 await 关键字等待了一个耗时 3 秒的异步操作：

async function doSomething() {
  let result = await promiseFunc();
  console.log(result);
}

2. Async 函数返回的值是一个 Promise 对象

Async 函数会自动将返回的值封装成一个 Promise 对象，因此可以使用 .then() 方法或 await 关键字来获取异步操作的结果。

// javascriptcn.com 代码示例
async function doSomething() {
  return 123;
}

doSomething().then((result) => {
  console.log(result);
});

// 123

3. 可以使用 try/catch 捕获异步操作中的错误

在使用 Async 函数时，需要使用 try/catch 来捕获异步操作中的错误。以下代码中，try/catch 捕获了一个 Promise 函数执行过程中的异常。

// javascriptcn.com 代码示例
async function doAsync() {
  throw new Error('something is wrong');
}

(async function main() {
  try {
    await doAsync();
  } catch (error) {
    console.log(error.message);
  }
})();
// 'something is wrong'

4. 可以使用 Promise.all 方法一次性等待多个 Promise 返回

和 Promise 一样，Async 函数也可以使用 Promise.all 方法，在多个异步操作全部执行完成后，一次性获取所有结果。

// javascriptcn.com 代码示例
async function doAsync() {
  let p1 = Promise.resolve('p1');
  let p2 = Promise.resolve('p2');
  let p3 = Promise.resolve('p3');
  let results = await Promise.all([p1, p2, p3]);
  console.log(results); // ['p1', 'p2', 'p3']
}

doAsync();

注意事项

使用 Async 函数时需要注意以下几个点：

1. Async 函数必须返回一个 Promise 对象

Async 函数需要有一个返回值，且该返回值必须是一个 Promise 对象。如果 Async 函数返回的不是 Promise 对象，那么会将其封装成一个 Promise 对象进行返回。

async function doSomething() {
  return 'hello world';
}

doSomething().then((result) => {
  console.log(result); // 'hello world'
});

2. async 与 await 关键字只能用在 Async 函数中

Async 函数是 ES8 中新增的语法，因此 async 和 await 关键字只能用在 Async 函数中，如果在普通函数中使用会报语法错误。

3. await 后面需要跟随一个 Promise

在 Async 函数中，必须使用 await 关键字来等待一个 Promise 对象，如果直接使用 await 关键字等待一个普通值，则会报错。

4. Async 函数可以嵌套使用

在 Async 函数中可以嵌套使用 Async 函数，但是要注意控制好异步操作的执行顺序。

示例代码

以下是一个使用 Async 函数的示例代码，其中 await 关键字等待了一个模拟的异步操作，模拟操作发生错误时的错误处理。

// javascriptcn.com 代码示例
async function loadData(url) {
  try {
    let response = await fetch(url);
    let data = await response.json();
    return data;
  } catch (error) {
    console.error(error.message);
    return null;
  }
}

(async function main() {
  let data = await loadData('https://www.example.com/data.json');
  if (data) {
    console.log(data);
  }
})();

总结

在语法上，Async 函数是非常方便与直观的，它使得异步操作更加容易理解、维护和编写。在使用上，Async 函数的错误处理也非常简单，可以使用 try/catch 来捕获异步操作中的错误。当然，也需要注意一些细节问题。通过掌握 Async 函数的使用方式，可以让开发者更加熟练地处理异步编程，在实践中更加高效地完成工作。

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