JavaScript Async/Await: 串行，并行和复杂流

本是古典何须时尚 2022-10-27 01:35 144阅读 0赞

# JavaScript Async/Await: 串行，并行和复杂流 #

如果你有**ASP.NET MVC**编程语言的从业经历，你应该很熟悉**C\#的关键字`async/await`。现在JavaScript** 也有同样的特性了。在`async/await`关键字还没有出现在**JavaScript**时，我们通常使用回调函数和Promise来处理异步代码。`async/await`构建与`Promise`对象和非阻塞特性之上。它的强大之处在于提供了一种语法使其写异步代码如同同步代码一般体验。在这篇文章中，我们将遍历串行/链式和并行流，并使用`async/await`实现一个复杂的流。

## async/await 结构 ##

考虑下面返回`Promise`对象的函数

function myPromise() { 
      return new Promise(function(resolve, reject) { 
        // do your async Job here
        if (/* all is well */) { 
          resolve('done')
        } else { 
          reject(Error('Failed!'))
        }
      })
    }

使用`async/await`

async function myAsyncFunc() { 
      try { 
        let result = await myPromise()
        console.log(result)
      } catch (err) { 
        console.log(err)
      }
    }
    
    myAsyncFunc()

**解释：**

*  `async`关键字在函数之前使用，这意味着该函数必然会返回一个Promise对象，如果函数返回的不是Promise对象，则会被包装为一个Promise对象。
 *  关键字`await`在调用Promise函数的前面使用，它让JavaScript等待，直到Promise对象的状态变为onFulfilled并返回它的结果。
 *  通常使用`try...catch`来处理错误，在Promise对象被拒绝的案例中，代码执行将直接跳转到`catch`代码块。
 *  `await`关键字只能在`async`函数内部使用，而不能在代码的顶层上下文使用，因为顶层上下文没有在`async`函数内部。

考虑下面的Promise函数：

function doJob(x, sec) { 
      return new Promise(resolve => { 
        console.log('Start:', x)
        setTimeout(() => { 
          console.log('End', x)
          resolve(x)
        }, sec * 1000);
      })
    }

我们将`x`和代表时间的参数`sec`传递到函数中，它将在给定时间之后返回`x`

## 串行、链式 ##

如果你想要按顺序执行不同的Promise，或者说，一个接着一个执行。我们可以使用`async/await`语法像写同步代码一样很容易的写出来。

async function SerialFlow() { 
      let result1 = await doJob(1, 1)
      let result2 = await doJob(2, 2)
      let result3 = await doJob(3, 3)
    
      let finalResult = result1 + result2 + result3
    
      console.log(finalResult)
    
      return finalResult
    }
    
    SerialFlow()

在上面的函数中，首先等待了1秒后1被执行，然后等待了2秒后开始执行2，最后执行3。1，2，3是按顺序执行的。因此总时间是6秒。

控制台输入如下：

Start: 1
    End: 1
    Start: 2
    End: 2
    Start: 3
    End: 3
    6

你可以使用循环来做到同样的目的：

async function SerialLoopFlow (jobs) { 
      let finalResult = 0
    
      for (const job of jobs) { 
        let result = await doJob(job, job)
        finalResult += result
      }
      console.log(finalResult)
    }
    
    SerialLoopFlow([1, 2, 3])

输出结果和上一个函数四同样的

你也可以使用`Array.prototype.reduce`来达到同样的目的：

async function SerialReduceFlow(jobs) { 
      let finalResult = await jobs.reduce(async (total, job) => { 
        return await total + await doJob(job, job)
      }, 0)
    
      console.log(finalResult)
    }
    
    SerialReduceFlow([1, 2, 3])

## 并行、并发流 ##

如果你想要使用并行的方式执行同样的代码：

async function ParallelFlow() { 
      let result1 = doJob(1, 1)
      let result2 = doJob(2, 2)
      let result3 = doJob(3, 3)
    
      let finalResult = await result1 + await result2 + await result3
    
      console.log(finalResult)
    
      return finalResult
    }
    
    ParallelFlow()

同时开始，在1秒后1执行结束，2，3分别在2秒和3秒结束。 总时间是3秒。

控制台输出如下：

Start: 1
    Start: 2
    Start: 3
    End: 1
    End: 2
    End: 3
    6

如果你认为是`await`处于同一行才导致的并行执行。那么，你想错了。试考虑如下代码：

async function ParallelFlow() { 
      let result1 = doJob(1, 1)
      let result2 = doJob(2, 2)
      let result3 = doJob(3, 3)
    
      let r1 = await result1
      let r2 = await result2
      let r3 = await result3
    
      let finalResult = r1 + r2 + r3
    
      console.log(finalResult)
    
      return finalResult
    }
    
    ParallelFlow()

上面的程序是相同的，并行执行所有三个程序。因此关键点是，如果你使用了`await doJob(1, 1)` 因此它是按顺序执行的。如果你将它分配到一个变量上，并在之后`await`这个变量，则执行便是并行的。

对于数组，你可以使用`Array.prototype.map`并行的运行它。

async function ParallelMapFlow(jobs) { 
      let results = jobs.map(async (job) => await doJob(job, job))
      let finalResult = 0
      for (const result of results) { 
        finalResult += (await result)
      }
    
      console.log(finalResult)
    }
    
    ParallelMapFlow([1, 2, 3])

输出是一样的，3秒内函数将执行完成。你也可以使用`Promise.all`和`await`达到同样的效果

async function ParallelPromiseAllFlow(jobs) { 
      let promises = jobs.map((job) => doJob(job, job))
      let result = await Promise.all(promises)
      let finalResult = 0
    
      for (const result of results) { 
        finalResult += (await result)
      }
    
      console.log(finalResult)
    }

## 复杂流 ##

在实际的实现中，要求不是直截了当的。它是串行和并行流的组合。 让我们来看看下面的流程：  
![complex flow][]

1，2是串行的，然后3，4，5和6，7的串行是并行的。让我们使用`async/await`来实现它吧。

1，2串行：

let result1 = await doJob(1, 1)
    let result2 = await doJob(2, 1)

6，7串行：

let Flow6_7 = async function() { 
      let result6 = await doJob(6, 1)
      let result7 = await doJob(7, 1)
    
      return result6 + result7
    }

现在3，4，5和6\_7在并行执行:

let promises = [doJob(3,2), doJob(4, 2), doJob(5, 2), Flow6_7()]
    let results = promises.map(async (job) => await job)

因为6和7都是1秒，所以3、4、5需要2秒的持续时间，这样所有的都可以在同一时间结束。

我们对所有的方法做求和操作

let finalResult = result1 + result2
    for (const result of results) { 
      finalResult += (await result)
    }
    console.log(finalResult)

使用`try...catch`处理错误，下面是完整的代码：

async function complexFlow() { 
      try { 
     
        let result1 = await doJob(1, 1)
        let result2 = await doJob(2, 1)
     
        let Flow6_7 = async function() { 
          let result6 = await doJob(6, 1)
          let result7 = await doJob(7, 1)
          return result6 + result7
        }
     
        let promises = [doJob(3, 2), doJob(4, 2), doJob(5, 2), Flow6_7()];
        let results = promises.map(async (job) => await job)
        let finalResult = result1 + result2
        for (const result of results) { 
          finalResult += (await result)
        }
        console.log(finalResult)
        return finalResult
     
      } catch (err) { 
        console.log(err)
      }
    }
     
    complexFlow()

这是控制台的输出：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjYW9lZQ_size_16_color_FFFFFF_t_70_pic_left]  
为了验证错误捕获，我们在特定的情况下抛出一个错误试试：

function doJob(x, sec) { 
      if (x == 6) { 
        throw Error('test error')
      } 
      return new Promise(resolve => { 
        console.log('Start: ' + x)
        setTimeout(() => { 
          console.log('End: ' + x)
          resolve(x)
        }, sec * 1000)
      })
    }

然后控制台将会输出如下信息:

Error: test error
        at doJob ((index):69)
        at Flow6_7 ((index):87)
        at complexFlow ((index):92)

## 结论 ##

**Async/await**确实简化了处理Promises的工作，并通过相同的`try...catch`处理同步和异步错误，并显示了完整的错误堆栈，这对调试错误有很大帮助。**Node 8 LTS**已经支持了Async/await的全部特性。你有在使用吗？你愿意分享你的经验吗？

[complex flow]: /images/20221024/100fbf9ba6db4cbd99844e6d9dcc6aed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NjYW9lZQ_size_16_color_FFFFFF_t_70_pic_left]: /images/20221024/1850048bc6444e709941e654cad81b35.png