async和await

async

1、async函数会返回一个promise,并且Promise对象的状态值是resolved(成功的)
2、如果你没有在async函数中写return,那么Promise对象resolve的值就是undefined
3、如果你写了return,那么return的值就会作为你成功的时候传入的值

await

1、await 不能单独使用 必须放到 async函数中,放在普通函数前面去执行 没有任何区别
2、await 代表暂停 必须要等 promise执行完毕之后 再去执行接下来的程序,它也是解决地狱回调的一种方法

用async与await的作用:

async与await是基于promise实现的一个为了使我们的异步代码根据我们自己设定的顺序去执行而同步化的一种方法

await 等到之后,做了一件什么事情?

//创建一个普通函数
        function normal(){
          //  await
            console.log('我是一个普通函数')
        }
        //创建一个promise实例
        function promise(){
            let p = new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve('我成功了')
                },3000)
            })
            return p
        }

       promise().then((res)=>{
            console.log(res)
        }) 
        //async 
        async function fn(){
        //await normal();
          await promise().then((res)=>{
                console.log(res)
            }) 
            
            //在async中,通过await来接收promise返回的值
            let result = await promise()
            console.log(result,'result')
            console.log('我是小fn')
        }
        fn()

那么右侧表达式的结果,就是await要等的东西。

等到之后,对于await来说,分2个情况

  1. 不是promise对象

  2. 是promise对象

如果不是 promise , await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完,再回到async内部,把这个非promise的东西,作为await表达式的结果。
如果它等到的是一个 promise 对象,await 也会暂停async后面的代码,先执行async外面的同步代码,等着 Promise 对象 fulfilled,然后把 resolve
的参数作为 await 表达式的运算结果。

  • 如果asycn里的代码都是同步的,那么这个函数被调用就会同步执行
async function fn(){
  console.log('a')
}
fn()
console.log('b')
//a
//b

如果在await后面接的这个promsie都是同步的,后面的promise会同步执行,但是拿到这个值还是得等待(特别注意:如果promise没有一个成功的值传入,对await来说就算是失败了,下面的代码就不会执行),所以不管await后面的代码是同步还是异步,await总是需要时间,从右向左执行,先执行右侧的代码,执行完后,发现有await关键字,于是让出线程,阻塞代码

function fn(){
    return new Promise(resolve=>{
        console.log(1)
    })
}
async function f1(){
    await fn()
    console.log(2)
}
f1()
console.log(3)
//1
//3

这个代码因为fn是属于同步的,所以先打印出1,然后是3,但是因为没有resolve结果,所以await拿不到值,因此不会打印2

function fn(){
    return new Promise(resolve=>{
        console.log(1)
        resolve()
    })
}
async function f1(){
    await fn()
    console.log(2)
}
f1()
console.log(3)
//1
//3
//2

这个代码与前面相比多了个resolve说明promise成功了,所以await能拿到结果,因此就是1 3 2

借鉴于:https://www.jianshu.com/p/b4fd76c61dc9

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值