es6 - async 与 await的使用。promise.then的升级版

访问量: 134

参考;http://es6.ruanyifeng.com/#docs/async

我们可以认为async+ await是  promise..then的升级版。

总结:

1. async用来修饰function , 

2. await 只能用在 async 函数中, 用来声名该statement是个异步操作。

2. 所有写在 async函数中的语句(无论是否是await),都是一行一行代码顺序执行的。 

我们看一个 例子(promise + then)

function delayedPrint(time){
  console.info( (Date.now() / 1000) + "== 延迟 "+ time + "ms 后开始打印")
  return new Promise( resolve => {
    setTimeout( () =>{
      resolve(time + 500)
    }
    ,time)
  })
}

delayedPrint(2000).then( () => {
  console.info((Date.now() / 1000) + "== hello!")
})

运行结果:

1545636482.144== 延迟 2000ms 后开始打印
1545636484.148== hello!

可以把上面的代码写成:

function delayedPrint(time){
  console.info( (Date.now() / 1000) + "== 延迟 "+ time + "ms 后开始打印")
  return new Promise( resolve => {
    setTimeout( () =>{
      resolve(time + 500)
    }
    ,time)
  })
}

// 定义了一个封装后的方法: async ...
async function print(){

  // 调用该方法时, 传入一个参数就好了。resolver 不用传 
  await delayedPrint(2000)

  // 这一行代码就是resolver的实现
  console.info((Date.now() / 1000) + "== hello!")
}

// 最后,调用这个 async方法
print()

 效果是一样的。

$ node test_async.js
1545636670.899== 延迟 2000ms 后开始打印
1545636672.902== hello!

为什么使用它。

回答: 为了避免 callback hells (回调地狱)。(参考https://segmentfault.com/a/1190000007535316) 我们看下面的代码:

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(m, n) {
    console.log(`step2 with ${m} and ${n}`);
    return takeLongTime(m + n);
}

function step3(k, m, n) {
    console.log(`step3 with ${k}, ${m} and ${n}`);
    return takeLongTime(k + m + n);
}

上面的代码中,每一步的参数,都是上一次的结果, 例如 step2的参数 之一是step1的结果。 step3的参数是step2, step1的结果。如果用promise then来写的话:

function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => {
            return step2(time1, time2)
                .then(time3 => [time1, time2, time3]);
        })
        .then(times => {
            const [time1, time2, time3] = times;
            return step3(time1, time2, time3);
        })
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

可以看出非常麻烦, 但是用 await/async来写就特别舒服

async function doIt() {
    console.time("doIt");
    const time1 = 300;
    const time2 = await step1(time1);
    const time3 = await step2(time1, time2);
    const result = await step3(time1, time2, time3);
    console.log(`result is ${result}`);
    console.timeEnd("doIt");
}

doIt();

订阅/RSS Feed

Subscribe

分类/category