async函数、await函数、promise、then四者的关系

一、async和await

const img1 = await loadImg(url1) 
console.log(img1)

async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法 ，async函数的返回值是Promise对象，可以用then方法指定下一步的操作

参考博客：

• async和await
• then

1.特点

• 函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。
• await后面接一个会return new promise的函数并执行它
• await只能放在async函数里

2.案例

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

• 上面这段代码async中使await 摇色子()先执行
• 等到三秒后执行完再把得到的结果赋值给左边的n
• 也就是说test函数需要三秒钟才执行完成
• 所以test函数是异步的，因此前面必须写async

3.为什么要用await

• 为了使我们的异步代码，更像同步的代码

二、async函数的返回值

• async函数其实是Geneator函数的语法糖。
• then+下一步操作
  1.async函数的返回值是Promise对象可以用then方法指定下一步的操作。
  2.async函数可以看做多个异步操作，包装成一个Promise对象
  3.await命令就是内部then命令的语法糖。
• then+回调函数
  1.async函数返回一个Promise对象
  2.可以使用then方法添加回调函数。
  3.当函数执行的时候，一旦遇到await就会先返回
  4.等到异步操作完成，再接着执行函数体后面的语句。
  5.async函数内部return语句返回的值，会成为then方法回调函数的参数。