关于async和await的有趣事情

今天突然发现一个有趣的事情。

  <script>    
    function foo(){
      return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('hello')
        },1000)
    })
}

async function fun(){
    console.log( 111 )
   foo().then(res=>{
     console.log(res);
   })
    console.log( 'f' )
    console.log( 222 )
}
fun()
  </script>

打印的结果是
111
f
222
hello
这个打印顺序还是很好理解的

看下面这个就很有趣了

  <script>
   function foo(){
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('hello')
        },1000)
    })
}

async function fun(){
    console.log( 111 )
  let f = await foo()
    console.log( f )
    console.log( 222 )
}
fun()
</script>

打印结果是
111
等待一秒打印hello
222

在这里我们需要注意await是一个同步任务。

在这里可以发现我们在执行某一个代码时，如果必须依赖上一个代码里面的参数时，我们就可以使用await这个同步。

await的原理就是生成器。

  <script>
   function foo(){
    return new Promise((res,rej)=>{
        setTimeout(()=>{
            res('hello')
        },1000)
    })
}

async function fun(){
    console.log( 111 )
  let f = yeild foo()
    console.log( f )
    console.log( 222 )
}
fun()
</script>

第一个fun()执行后，可以看做第一次调用next()方法
也就是打印 111 和执行 foo()函数。foo函数执行完毕，打印了hello,再次调用next()方法。

如果对于再次调用next()方法不无法理解的话，
可以思考fun()函数的执行只要不报错就不会卡在某个地方。