现代 JS 讲座 async function

Source: Dev.to

概述

async 函数返回一个 Async Function 对象。通过使用 async 和 await 关键字，异步处理可以比原始 Promise 更简洁地编写。该特性在 ES2017 中标准化。

基本用法

在函数定义前添加 async 关键字。如果函数返回非 Promise 值，它会自动包装成已解决的 Promise。

async function asyncFunc() {
  return 'Amazing!';
}

asyncFunc().then(result => {
  console.log(result); // "Amazing!"
});

带参数的返回值

你可以返回包含参数的值；它仍会被包装在 Promise 中。

async function asyncFuncB(text) {
  return 'Amazing!' + text;
}

asyncFuncB('Indeed!').then(result => {
  console.log(result); // "Amazing!Indeed!"
});

直接返回 Promise

async 函数也可以返回显式的 Promise。

async function asyncFuncC() {
  return new Promise((resolve, reject) => {
    resolve('Wonderful!');
  });
}

asyncFuncC().then(result => {
  console.log(result); // "Wonderful!"
});

相同的逻辑可以更简洁地表达：

async function asyncFuncC() {
  return Promise.resolve('Wonderful!');
}

asyncFuncC().then(result => {
  console.log(result); // "Wonderful!"
});

使用 await

在 async 函数内部，await 操作符会暂停执行，直到等待的 Promise 完成，从而让你无需显式的 .then() 链即可编写代码。

async function awaitFunc() {
  return 'Wonderful!';
}

async function asyncFuncD() {
  const result = await awaitFunc();
  console.log(result); // "Wonderful!"
}

asyncFuncD();

进一步阅读

• MDN – async function