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()

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

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的全部特性。你有在使用吗？你愿意分享你的经验吗？

posted @ 2021-02-02 20:05 西河阅读(106) 评论(0) 编辑收藏举报

刷新页面返回顶部

编程之行

在前端路上

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

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

async/await 结构

串行、链式

并行、并发流

复杂流

结论

公告