【ES6】Promise与async/await的关系

一、Promise简介
Promise构造函数阶接受一个函数为参数,该函数的两个参数分别为resolve和reject。

Promise有三种状态:异步操作未完成、异步操作成功和异步操作失败, 异步操作结果只有两种从进行中到失败和从进行中到成功;
resolve()表示异步操作成功;
reject()表示异步操作失败

let a = function () {
      return new Promise(() => {
        console.log(11)
        setTimeout(() => {
          resolve(222)
        }, 1000)
      })
    }

 console.log(a())//输出11和一个Promise

二、Promise的then和catch
通过Promise的原型方法then拿到我们的返回值,如果出错呢?那就用catch捕获:

 a().then((res)=>{
      console.log(3333)//1秒之后输出333
    })
    .catch((err)=>{
    console.log(err) // 输出错误
})

三、Async/await
async声明的函数的返回本质上是一个Promise。就是说你只要声明了这个函数是async,那么内部不管你怎么处理,它的返回肯定是个Promise。例子:

let a = async function () {
    return '我是Promise'
}
// a()返回是Promise
//Promise {<resolved>: "我是Promise"}

等同于:

let a = async function () {
    return Promise.resolve('我是Promise');
     // 等同于 return '我是Promise'
    // 等同于 return new Promise((resolve,reject)=>{ resolve('我是Promise') })
}

以下代码为拿到返回值

let a = async function () {
    return '我是Promise'
}
a().then(result=>{
    console.log(result) // 这里拿到返回值,输出结果为”我是Promise“
})

await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖。只要await声明的函数还没有返回结果,那么下面的代码是不会执行的!!!

const a= async ()=>{
    let result = await new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve('我延迟了一秒')
      }, 1000)
    });
    console.log('上面的代码还没执行完,先不执行“等待一会”');
    return result;
}
// a的返回当做Promise
a().then(result=>{
  console.log('输出',result); // 输出 我延迟了一秒
})

//你会发现,输出是这样的:一秒之后才输出
//上面的代码还没执行完,先不执行“等待一会”
// 输出 我延迟了一秒

结论:只要你用await声明的异步返回,必须“等待”到有返回值的时候,代码才继续执行下去!!!!

四、Promise与async/await的关系
async函数执行等同于return一个Promise;
await只能在async函数中使用;
await后面是一个Promise;
await返回的是Promise的resolve的传参;也就是说await返回的是async函数return的值;

  • 8
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
promiseasync/await都是用于处理异步操作的方式,但它们在语法和使用上有一些区别。 1. PromisePromiseES6引入的一种处理异步操作的方式。它是一个对象,表示一个异步操作的最终完成(或失败)及其结果的值。Promise提供了一个链式的调用方式,可以通过then()方法来处理异步操作的结果,也可以通过catch()方法来处理异常情况。 2. async/awaitasync/awaitES8引入的一种处理异步操作的方式。它是基于Promise的语法糖,使得异步代码看起来更像同步代码。使用async关键字声明一个函数为异步函数,然后在需要等待异步操作结果的地方使用await关键字来等待Promise对象的完成。 区别: - 语法简洁性:async/await相对于Promise更加简洁,更接近于同步代码的写法,使得代码更易读、易理解。 - 错误处理:使用Promise时需要通过catch()方法来捕获异常,而async/await可以使用try/catch语句来处理异常,使得错误处理更加直观。 - 链式调用:Promise通过链式调用的方式来处理多个异步操作,而async/await可以使用同步的方式编写多个异步操作,使得逻辑更加清晰。 - 可读性:async/await相对于Promise更加易于理解和阅读,特别是对于有较多异步操作的代码块。 需要注意的是,async/await是基于Promise的,实际上async函数会返回一个Promise对象。在使用async/await时,可以将任何返回Promise对象的异步操作转化为同步的写法,但在某些情况下可能会导致阻塞。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值