【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的值；