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

JavaScript 是单线程异步函数，是一个可以在不阻塞线程的其他操作的情况下执行的耗时操作。这可以通过异步代码来完成，例如 承诺或异步函数（基本上是更干净的承诺）。异步函数很酷，但是它们的执行时间不确定，当我们有两个相互依赖的异步函数时，这有时会产生问题。

注意：本文将使用 ES2015+ 功能，如异步函数、箭头函数等。但是，使用旧的 ES 功能可以实现相同的结果。

示例 1：为了帮助我们实现这一点，我们提供了三个异步函数（黑盒函数）。

Javascript

  async function getUserData() {
      console.log('Fetching data');    
  }
 
  async function cleanUserData(userData) {
      console.log('Cleaning data');     
  }
 
  async function saveToDataBase(userData) {
      console.log('Saving to DB');    
  }
  const userData = getUserData();
  const cleanedData = cleanUserData(userData);
  saveToDataBase(cleanedData);

输出：这些是异步函数，它们的执行时间并不总是相同的。所以这些函数可以以任何可能的顺序运行。以下是一种可能的输出。

Cleaning data
Saving to DB
Fetching data

有两种方法可以运行这些函数来强制执行函数的顺序。

1.使用 Promise 的.then()

Javascript

async function getUserData() {
      console.log('Fetching data');    
  }
 
  async function cleanUserData(userData) {
      console.log('Cleaning data');     
  }
 
  async function saveToDataBase(userData) {
      console.log('Saving to DB');    
  }
  getUserData()
    .then((userData) => cleanUserData(userData))     
    .then((cleanedData) => saveToDataBase(cleanedData))
    .then(() => console.log('All work done'))       
 

输出：

Fetching data
Cleaning data
Saving to DB
All work done

这很好并且可以工作，但有时它会创建一个回调地狱，当你看到你的代码时，这可能会破坏你的心情（开个玩笑）。

2.使用异步/等待：

有一种更简洁的方法可以做同样的事情，使用await关键字等待函数完成其执行。 await() 仅在 async()函数内部有效。因此，我们需要将它们包装在一个包装函数中。

Javascript

  async function getUserData() {
      console.log('Fetching data');    
  }
 
  async function cleanUserData(userData) {
      console.log('Cleaning data');     
  }
 
  async function saveToDataBase(userData) {
      console.log('Saving to DB');    
  }
  async function cleanAndSaveUserData() {
    const userData = await getUserData();
    const cleanedData = await cleanUserData(userData);
    await saveToDB(cleanedData);
     
    console.log('All work done');
  }
 
  cleanAndSaveUserData(); // does all the work
 

输出：

Fetching data
Cleaning data
Saving to DB
All work done

注意：为简单起见，本文不涉及链式 async() 函数中的错误处理。