async\await的用法及比Promise的先进性

背景

刚跨越了抽象的Promise，说可以解决回调地狱。我实践中回调地狱遇到的不多，Promise的理解和掌握真是费劲。
又有了更先进的async\await！！
本文将解答了我的疑问：

1. async干什么的？
2. await干什么的？
3. 与promise的关系？
4. async、await的阻塞性？

是什么

1. async\await是解决js回调的更优形式，用更符合人脑直接理解的线性代码形式，实现了回调功能。
2. 是基于Promise对象的，async返回promise对象，await等待promise对象。所以promise的了解是避不开的。
3. 是Generator的语法糖。

如何使用

用法及相对Promise的优势

//  语法的优势
//假设要顺次完成3个请求
//promise写法
function takeLongtime(msg){
  return new Promise(resolve=>{
    setTimeout(()=>resolve(msg),2000)
  } )
}

//promise链式then调用并不直观
takeLongtime('step1').then(x=>{
  console.log(x)
  return takeLongtime('step2')
}).then(x=>{
  console.log(x)
  return takeLongtime('step3')
}).then(x=>{
  console.log(x)
})	   

//async/await写法
async function doit(){
  //实质是回调，写法是线性，语义好理解
  let x=await takeLongtime('step1')
  console.log(x)
  let y=await takeLongtime('step2')
  console.log(y)
  let z=await takeLongtime('step3')
  console.log(z)
}


doit()

函数的阻塞性

function takeLongtime(){
  return new Promise(resolve=>{
    setTimeout(()=>resolve("long_time_value"),1000)
  })
}


async function test(){
  const v=await takeLongtime();
  console.log(v)
  //async内部，await函数是阻塞的
  //await后，实质是回到函数，但写法是线性的
  console.log('我会不会被await阻塞呢？')
}

test()
//外部调用async函数，不是阻塞的
console.log('我会不会被async阻塞呢？')	   

输出：
可以看到async没有阻塞，await阻塞的。

我会不会被async阻塞呢？ debugger eval code:18:9
undefined
long_time_value debugger eval code:10:11
我会不会被await阻塞呢？ debugger eval code:13:11

try/catch的使用

function  takeLongtime(){
  return new Promise((resolve,reject) =>{
    setTimeout( ()=>reject('异步请求失败了') ,2000 )
  })
}

async function doit(){
  try{
    let msg=await takeLongtime()
    console.log('msg:      ',msg)
  }
  catch(err){
    console.log('err:        ',err)
  }
}


console.log('begin')
doit()
console.log('game done')

输出：捕获是处理的promise的reject情况。

begin debugger eval code:18:9
game done debugger eval code:20:9
undefined
err:         异步请求失败了 debugger eval code:13:13

解答之前的疑问

1. async干什么的？
   &：标识是一个异步函数，返回Promise对象；不会阻塞调用async后的执行。
2. await干什么的？
   &：标识在等待一个异步执行，正常情况下等待的是一个promise，返回promise的resolve信息。
   当然也有可能返回reject，所以用try\catch包裹await的执行。
3. 与promise的关系？
   &：async、await都基于promise。
4. async、await的阻塞性？
   &：async不阻塞外部，await阻塞但在async内部。

总结

参考

https://segmentfault.com/a/1190000007535316
http://www.ruanyifeng.com/blog/2015/05/async.html