如何在 JavaScript 中链接异步函数？

在 JavaScript 中，异步函数非常常见。例如，当我们需要从服务器获取数据进行处理时，我们通常会使用异步函数。但有时，我们需要按照一定的顺序依次运行多个异步函数。这时，我们就需要将它们链接起来。本文将介绍如何在 JavaScript 中链接异步函数。

Promise

在 JavaScript 中，Promise 是处理异步函数的一种方式。Promise 是一个代表了异步操作最终完成或失败的对象。可以使用 Promise 将多个异步函数链接起来。

Promise 的基本用法

以下是 Promise 的基本用法：

function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function Completed!');
    }, 1000);
  });
}

asyncFunction().then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

在上面的代码中，asyncFunction 返回一个 Promise 对象。当异步操作完成时，resolve 方法会被调用，如果异步操作失败，则会调用 reject 方法。在这个例子中，异步操作仅仅是等待 1 秒钟而已。当异步操作完成之后，我们使用 then 方法来处理结果，如果出现错误则使用 catch 方法来处理。

Promise 链接异步函数

在下面的例子中，我们将链接两个异步函数：

function asyncFunction1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function 1 Completed!');
    }, 1000);
  });
}

function asyncFunction2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function 2 Completed!');
    }, 2000);
  });
}

asyncFunction1().then((result) => {
  console.log(result);
  return asyncFunction2();
}).then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

在上面的代码中，我们用 then 方法链接两个异步函数。当第一个函数完成时，我们返回一个 Promise 对象，它会等待第二个异步函数完成，然后才会执行第二个 then 方法。如果有错误，它们会被 catch 方法处理。

async/await

使用 async/await 是另一种处理异步函数的方法。在使用 async/await 时，我们可以使用 await 关键字来等待一个异步函数完成。使用 async 关键字来定义一个异步函数。

async/await 的基本用法

以下是 async/await 的基本用法：

function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function Completed!');
    }, 1000);
  });
}

async function main() {
  const result = await asyncFunction();
  console.log(result);
}

main().catch((error) => {
  console.log(error);
});

在上面的代码中，我们使用 async 关键字定义了一个异步函数 main，我们可以在其中使用 await 关键字等待异步函数 asyncFunction 完成。当异步函数 asyncFunction 完成之后，我们可以使用 console.log 来打印输出。

async/await 链接异步函数

以下是使用 async/await 链接异步函数的例子：

function asyncFunction1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function 1 Completed!');
    }, 1000);
  });
}

function asyncFunction2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async Function 2 Completed!');
    }, 2000);
  });
}

async function main() {
  const result1 = await asyncFunction1();
  console.log(result1);
  const result2 = await asyncFunction2();
  console.log(result2);
}

main().catch((error) => {
  console.log(error);
});

在上面的代码中，我们使用 async/await 异步函数链接了两个异步函数。当第一个异步函数完成之后，我们等待第二个异步函数完成，然后输出结果。我们也可以在 main 函数中使用 try...catch... 来捕获错误。

小结

在 JavaScript 中，处理异步函数的一种方式是使用 Promise，它可以将多个异步函数链接在一起。另一种处理异步函数的方式是使用 async/await。使用 async/await 可以让代码呈现出更加线性的形式，也更容易理解。