使用ES2017 async/await函数的注意点

BetaRabbit

随着node 7.6.0正式实装async/await函数,js的异步编程变的比以往更加容易。但是,在我们全面投入async/await的怀抱之前,有必要对这个特性做一些细致的了解。

书写形式

基本上,任何一个函数都可以成为async函数,以下都是合法的书写形式:

  • 函数声明
    async function foo () {}

  • 函数表达式
    const foo = async function () {}

  • 方法定义
    const obj = { async foo () {} }

  • 箭头函数
    async () => {}

async函数总是返回Promise

即使返回值只是一个primitive值,async函数也会通过return自动将返回值包装成一个Promise对象返回。
因此,下面两组函数是等价的。

正常 (Fulfill)

// async函数
async function foo () {
  return 'a'
}

// Promise
function foo () {
  return Promise.resolve('a')
}

异常 (Reject)

// async函数
async function foo () {
  throw new Error('error')
}

// Promise
function foo () {
  return Promise.reject(new Error('error'))
}

注意:当返回值本身就是一个Promise对象时,async函数的return并不会对返回值进行二次包装。

await总是按顺序执行

使用async函数之前,我们还得搞清楚它的运行机制。尤其是在执行顺序上,完全用同步的思维也许并不适用于async函数。

考虑下面的代码

function asyncGet (x) {
  return new Promise(resolve => setTimeout(() => {
    console.log('a')
    resolve(x)
  }, 500))
}

async function test () {
  console.log('b')
  const x = 3 + 5
  console.log(x)

  const a = await asyncGet(1)
  console.log(a)

  const b = await asyncGet(2)
  console.log(b)

  console.log('c')  
  return a + b
}

const now = Date.now()
console.log('d')
test().then(x => {
  console.log(x)
  console.log(`elapsed: ${Date.now() - now}`)
})
console.log('f')
  1. async函数和普通函数一样按顺序执行,同时,在执行到await语句时,返回一个Promise对象

  2. await可以理解为将async函数挂起,直到等待的Promise被fulfill或者reject,再继续执行之后的代码

  3. async函数的返回值和普通Promise没有区别

因此,上面代码输出应该是

d
b
8
f
a
1
a
2
c
3
elapsed: 1010

注意 d 和 f 中间的输出

让我们再来看一个混合了Promise的版本。

function asyncGet (x) {
  return new Promise(resolve => setTimeout(() => {
    console.log('a')
    resolve(x)
  }, 500))
}

async function test () {
  console.log('b')
  const x = 3 + 5
  console.log(x)

  const [a, b] = await Promise.all([
    asyncGet(1),
    asyncGet(2)
  ])

  console.log('c')  
  return a + b
}

const now = Date.now()
console.log('d')
test().then(x => {
  console.log(x)
  console.log(`elapsed: ${Date.now() - now}`)
})
console.log('f')

输出结果

d
b
8
f
a
a
c
3
elapsed: 509

注意到elapsed的差别了吗?这就是为什么我们说await总是顺序执行的。不同的await之间无法并行执行,想要真正的完全异步还得借助类似Promise.all这样的方法。

async函数和callback

await只能能影响直接包裹它的async函数。因此在callback函数中的await并不会挂起整个async函数的执行。

一种常见的错误

async function getAll (vals) {
  return vals.map(v => await asyncGet(v))
}

这段代码有语法错误,await并不在async函数内部。如果给map的callback加上async呢?

async function getAll (vals) {
  return vals.map(async v => await asyncGet(v))
}

这段代码虽然能执行,但还有两个问题。

  1. 返回一个Promise对象的数组,并不是我们期待的value数组

  2. await只会暂停map的callback,因此map完成时,不能保证asyncGet也全部完成

正确的写法还得借助Promise.all

async function getAll (vals) {
  return Promise.all(vals.map(v => asyncGet(v)))
}

总结

从上我们可以看出,Promiseasync函数的基础,想要愉快的使用async函数,必须对Promise有比较深入的理解。甚至一些常见的任务,仅仅依靠async函数无法实现。
希望大家看完本文后能对async函数有个更全面的认识,这样使用起来才会更加顺手。

阅读 18.1k

笨兔子
记录些随想、问题解决方法和平时学习的总结

全栈,猫奴

1.4k 声望
22 粉丝
0 条评论

全栈,猫奴

1.4k 声望
22 粉丝
文章目录
宣传栏