【async和await】深入理解

async/await的用处就是:用同步方式,执行异步操作,怎么说呢?举个例子

function one(){
  return 'I am one'
}
function two(){
  setTimeout(()=>{
    return 'I am two'
  },3000)
}
function three(){
  return 'I am three'
}
function run(){
  console.log(one());
  console.log(two());
  console.log(three());
}
run()

结果是

I am one
undefined
I am three

原因是我们的异步执行里面3个打印它是不会等到two()的方法执行完了以后才打印出来,所以它就一路执行下来,所以函数two()打印出来的是undefined,但是在实际开发里面我们需要等到two()这个函数执行完了以后再去执行下面的操作也就是把异步当成同步来执行,而我们的promise就是用来做这个是事情的。

function two(){
  return new Promise((resolve, reject) =>{
    setTimeout(()=>{
      resolve('I am two')
    },3000)
  })
}

此时输出的结果是

I am one
Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: "I am two"
I am three

为什么会是一个pending的状态呢?原因是我们虽然我们将two()这个方法改成了Promise,但是我们在调用的时候并没有声明需要等这个two()里的promise完成之后再继续往下执行,所以它就会返回一个pending的状态。我们此时需要让two()执行完了以后再让three()执行,就需要使用async和await

 async function run(){
  console.log(one());
  console.log( await two());
  console.log(three());
}
run()

结果

I am one
I am two  //3秒以后输出 I am two
I am three

其实就类似于生活中的排队,咱们生活中排队买东西,肯定是要上一个人买完,才轮到下一个人。而上面也一样,在async函数中,await规定了异步操作只能一个一个排队执行,从而达到用同步方式,执行异步操作的效果,这里注意了:await只能在async函数中使用,不然会报错哦

async作用

async function test() {
  return 'test';
}
console.log(test); // [AsyncFunction: test] async函数是[`AsyncFunction`]构造函数的实例
console.log(test()); // Promise { 'test' }

// async返回的是一个promise对象
test().then(res=>{
  console.log(res); // test
})

// 如果async函数没有返回值 async函数返回一个undefined的promise对象
async function fn() {
  console.log('没有返回');
}
console.log(fn()); // Promise { undefined }

// 可以看到async函数返回值和Promise.resolve()一样,将返回值包装成promise对象,如果没有返回值就返回undefined的promise对象

await

await 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果,也就是说它会阻塞后面的代码,等待 Promise 对象结果。如果等待的不是 Promise 对象,则返回该值本身。

  • 只能出现在 async 函数内部或最外层
  • 等待一个 promise 对象的值
  • await 的 promise 的状态为 rejected,后续执行中断
    在这里插入图片描述

总结

async用于声明一个function是异步的,而await用于等待一个异步方法执行完成

  • await只能在async函数中使用,不然会报错
  • async函数返回的是一个Promise对象,有无值看有无return值
  • await后面最好是接Promise,虽然接其他值也能达到排队效果
  • async/await作用是用同步方式,执行异步操作
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值