Javascript中的async函数详解

Introduction

在Javascript中，async函数是一个让我们可以使用异步的方法来执行本来以同步方式执行的代码的函数。

它使我们能够避免回调地狱并轻松处理异步代码的结果。在本文中，我们将详细讲解async函数，并说明如何使用它们。

Async函数和Promise

ES6中带来了很多新的概念和特性，如Promise和async函数。因此需要先理解共同之处。

与Promise一样，async函数都是为了处理异步代码而存在的。但是，如下所示的代码可以将Promise和async函数区分开来。

// Promise
function getData() {
  return new Promise(resolve => setTimeout(() => resolve("data"), 1000));
}

// Async 函数
async function getData() {
  return await new Promise(resolve => setTimeout(() => resolve("data"), 1000));
}

async函数在其定义中包含关键字async，并且可以在函数体中使用await关键字。await会暂停代码执行并等待Promise的解决。它相当于Promise的then()

Async函数返回值

async函数始终返回一个Promise对象。这样，在await操作符出现的位置处将暂停执行，直到Promise被解决。当Promise解决后，函数将以解决时的值恢复执行。

async function getData() {
  return await new Promise(resolve => setTimeout(() => resolve("data"), 1000));
}

getData().then(data => console.log(data)); // "data"

在上面的示例中，我们定义了一个名为getData的async函数。该函数返回一个Promise对象，该Promise对象在1秒后将解决，值为"data"。

我们通过调用getData()方法并使用.then()来解决这个Promise。然后我们调用console.log()以将结果打印到控制台。

Async函数的错误处理

我们可以使用try-catch语句来捕获async函数中的错误。

async function getData() {
  throw new Error("Error: Oops!");
}

try {
  getData();
} catch (err) {
  console.log(err);
}

在上面的示例中，我们定义一个名为getData的async函数。该函数在执行期间抛出一个错误。然后，我们尝试调用该函数并使用try-catch语句捕获错误。

Async函数和多个Promises

在async函数中，我们可以同时运行多个Promise。

async function getData() {
  const data1 = await new Promise(resolve => setTimeout(() => resolve("data 1"), 1000));
  const data2 = await new Promise(resolve => setTimeout(() => resolve("data 2"), 1000));

  return [data1, data2];
}

getData().then(data => console.log(data)); // ["data 1", "data 2"]

在上面的示例中，我们定义getData函数。该函数同时运行两个Promise并等待它们的解决。然后，函数返回一个数组，该数组包含解决的Promise的结果。

我们通过调用getData()方法并使用.then()来解决这个Promise。我们调用console.log()以将结果打印到控制台。

Async函数和await

async/await实现了从Promise回到简单同步代码的转变。

async function getData() {
  const data = await new Promise(resolve => setTimeout(() => resolve("data"), 1000));
  console.log(data);
  return data;
}

console.log("Before");
getData();
console.log("After");

在上面的示例中，我们定义了一个名为getData的async函数。该函数等待Promise解决并输出打印。然后我们在getData()后立即输出After。此输出在异步代码之前，因为async函数返回一个Promise并在后台运行，不会阻塞代码执行。

Async函数和处理具有并发限制的多个任务

async函数允许我们以保留并发控制的方式运行多个任务。通过同时处理Promise并遍历结果，然后通过.map()并设置Promise.all()，可以在有多个Promise的情况下保留延迟的顺序同时使得延迟彼此无关。

async function orderParallel(fnList, limit) {
  let running = 0;
  let results = [];
  let index = 0;

  function run(fn, fnIndex) {
    running++;
    fn().then(result => {
      results[fnIndex] = result;
      running--;
      runAll();
    });
  }

  function runAll() {
    while (running < limit && index < fnList.length) {
      const fn = fnList[index];
      run(fn, index++);
    }
    if (running === 0 && index === fnList.length) {
      console.log(results);
      return results;
    }
  }

  return await runAll();
}

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

const delays = [1000, 2000, 3000, 4000];
const promises = delays.map(delayTime => () => delay(delayTime).then(() => delayTime));

orderParallel(promises, 2);

在上面的示例中，我们定义了一个名为orderParallel的async函数。该函数同时运行带有一个Promise列表的多个Promise，并避免最大并发的数量。使用一个遍历方法来完成这一点，我们设置的最大并发限制器是2。

通过delay函数模拟一个单独的，具有3000毫秒延迟的操作。在最后一个console.log()中，我们就是得到了一个长度为4的数组，其中的元素和delays数组中的元素一一对应，并且在指定的延迟后输出。

Conclusion

在Javascript中，async函数是一个让我们可以使用异步的方法来执行本来以同步方式执行的代码的函数。在ES6中引入了Async函数，它如Promise一样帮助我们处理异步代码。然而，Async提供了一种简单的方式来书写异步代码，以避免回调地狱。我们也讲解了async函数的错误处理、返回和使用示例，并展示了一些进一步有用的示例。