async和await

2018-10-02  本文已影响0人  小小的白菜

浅谈Async/Await
用 async/await 来处理异步

async和await

async:声明一个异步函数(async function someName(){...})

await:暂停异步的功能执行(var result = await someAsyncCall())

await 容错
async  function f() {
    return await 123
}
f().then(v => { 
    console.log(v) // 123
})

怎样容错呢?由于await后面的promise运行结果可能是rejected,最好把await放入try {} catch {}中。

await后的异步操作,如果彼此没有依赖关系最好同时触发,在下面场景一会有介绍。

await只能在async函数之中,如果在普通函数中,会报错。

async、await 优缺点
var a = 0
var b = async () => {
  a = a + await 10
  console.log('2', a) // -> '2' 10
  a = (await 10) + a
  console.log('3', a) // -> '3' 20
}
b()
a++
console.log('1', a) // -> '1' 1
场景一

写一个函数,让它返回promise对象,该函数的作用是2s之后让数值乘以2

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000)
    } )
}

现在再写一个async函数,从而可以使用await关键字,await后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用。

async function testResult() {
    let result = await doubleAfter2seconds(30)
    console.log(result)
}
testResult() // 打开控制台,2s 之后,输出了60.

具体到 我们的代码, 遇到await之后,代码就暂停执行了, 等待doubleAfter2seconds(30)执行完毕,doubleAfter2seconds(30)返回的promise开始执行,2 秒之后,promise执行resolve 了, 并返回了值为60, 这时await才拿到返回值60, 然后赋值给result, 暂停结束,代码才开始继续执行,执行console.log语句。

场景二

我们同时发出三个不互相依赖的请求,如果用async/await就显得不明智了。

async function getABC() {
  let a = await getA() {}
  let b = await getB() {}
  let c = await getC() {}
  return A*B*C
}

上面我们 A 需要 2s,B 需要 4s,C 需要 3s,我们如上图所示发请求,就存在彼此依赖的关系,c 等 b 执行完,b 等 a 执行完,从开始到结束需要(2+3+4)= 9s。
此时我们需要用Promise.all()将异步调用并行执行,而不是一个接一个执行,如下所示:

async function getABC() {
  let results = await Promise.all([ getValueA, getValueB, getValueC])
  return results.reduce((total, value) => total * value)
}

这样将会节省我们不少的时间,从原来的的 9s 缩减到 4s,是不是很开心,耶~

上一篇 下一篇

猜你喜欢

热点阅读