Promise 对象

 promise对象是异步编程的一种解决方案,它的出现解决了回调地狱的问题

如果有这么一个需求,一个异步操作需要依赖上一次异步操作的结果怎么做?

传统的解决方案: 回调地狱 / 恶魔金字塔

   function getInfo () {
      $.ajax({
        method: 'GET',
        url: 'http://115.159.87.220:4000/books',
        success (res) {
          console.log(res);
          $.ajax({
            method: 'GET',
            url: 'http://115.159.87.220:4000/books',
            success (res) {
              console.log(res);
            }
          })
        }
      })
    }
    getInfo()

ES6推出的promise 就很好的解决了这种回调地狱的问题

那么究竟promise是什么东西呢?

实质上 Promise是一个构造函数 , 但是大家普遍都叫promise对象

一个promise必定有 三种状态

1. pending 初始状态

2. fulfilled 成功状态

3. rejected 失败状态时

既然Promise是一个构造函数,那么就可以通过new关键字, 创造一个promise的实例对象

new Promise () 括号内 跟一个回调函数 这个回调函数是同步的 回调函数中有两个形参 一个resolve 一个reject 调用resolve会将返回的promise处于成功状态 reject反之

 const promise = new Promise(function (resolve, reject) {
      $.ajax({
        method: 'GET',
        url: 'http://115.159.87.220:4000/books',
        success (res) {
          // 传出去了
          resolve(res)
            // resolve的作用 使promise处于成功状态  将括号内的值 保存到PromiseResult属性中
        }
      })
    })
    console.log(promise);  
 //  PromiseState 状态属性 fulfilled 表示成功状态  PromiseResult 结果属性  将promise返回的结果 保存在这里

promise对象上的方法有哪些?

Promise构造函数原型上的方法，可以通过创建一个Promise实例进行调用

1. then()方法

   then方法 可以基于promise的状态以及结果来进行下一步的操作, then方法就已经解决了回调地狱的问题 , then方法的返回值是一个成功状态的promise对象

       const promise = new Promise(function (resolve, reject) {
         $.ajax({
           method: 'GET',
           url: 'http://115.159.87.220:4000/books',
           success (res) {
             resolve(res)
           }
         })
       })
       const p1 =  promise.then((res)=>{
         console.log(res);
         $.ajax({
           method: 'GET',
           url: 'http://115.159.87.220:4000/books',
           success (res) {
           }
         })
           return res  // 在这里 return res 实际上就是把res数据保存到 promise对象的PromiseResult 结果属性里
       })
       console.log(p1);

2. catch()

   catch方法是用来捕获处理promise中的错误 返回值是一个promise对象 形参reason是错误信息

      const p1 =  promise.then((res)=>{
         console.log(res);
         $.ajax({
           method: 'GET',
           url: 'http://115.159.87.220:4000/books',
           success (res) {
           }
         })
         return res2  // 这里故意写错 让代码进catch
       })
      const p2 =  p1.catch((reason)=>{
         console.log(reason);
       })
       console.log(p2);

3. finally()

   无论promise的状态时成功还是失败 最终都会执行finally方法 一般在此方法中定义成功或失败后都要进行的操作

       const p1 =  promise.then((res)=>{
         // console.log(res);
         $.ajax({
           method: 'GET',
           url: 'http://115.159.87.220:4000/books',
           success (res) {
           }
         })
         return res
       }).finally(()=>{
         console.log(1);
       })

静态方法:  Promise构造函数本身上的方法

Promise.all()

   all方法形参是一个数组, 数组中装多个promise对象, all方法中所有的promise执行完, 才会执行下面的代码, 返回值也是一个promise, return数据会将结果保存

其中只要有一个promise处于失败状态 就会报错进入catch , 但是之后的promise也会执行 

应用场景: 集合多个promise返回的结果时, 或者说需要多个请求返回的数据时 使用all方法

    // 成功的情况
    let p1 = Promise.resolve('aaa')
    let p2 = Promise.resolve('bbb')
    let p3 = Promise.resolve('ccc')

    Promise.all([p1, p2, p3]).then(res => {
      console.log(res);  // 代码会走到这里并输出结果['aaa','bbb','ccc']
    }).catch(err => {
      console.log(err);
    })

    // 其中有promise失败的情况
    let p1 = Promise.resolve('aaa')
    let p2 = Promise.resolve('bbb')
    let p3 = new Promise((resolve, reject) => {
      console.log(1);
      reject(new Error('出错了1'))
    })
    let p4 = new Promise((resolve, reject) => {
      console.log(2);
      reject(new Error('出错了2'))
    })
    Promise.all([p1, p2, p3, p4]).then(res => {
      console.log(res); 
    }).catch(err => {
      console.log(err); // 代码会走到这里打印错误
    })

为了证明所有的promise都会执行, 给大家看一下输出 : 

Promise.all 有一个弊端, 只要一个promise出错就进入了catch函数来捕获错误 , 之前成功的promise的结果也看不到摸不着, 某些时候这就显得不是很友好 , 之后推出的Promise.allSettled就解决了这个问题

Promise.allSettled()  面试常问点一定得知道

    参数和all一致, 用法也一致只不过allSettled能拿到所有promise对象执行完毕的信息 , 返回值是一个数组

    let p1 = Promise.resolve('aaa')
    let p2 = Promise.resolve('bbb')
    let p3 = new Promise((resolve, reject) => {
      console.log(1);
      reject(new Error('出错了1'))
    })
    let p4 = new Promise((resolve, reject) => {
      console.log(2);
      reject(new Error('出错了2'))
    })
    Promise.allSettled([p1, p2, p3, p4]).then(res => {
      console.log(res); //返回数组 顺序是固定的  从上往下 [aaa, bbb , 出错了1, 出错了2]
    })

Promise.race()

    赛跑 形参也是一个数组 数组中装多个promise对象 返回执行最快的promise对象的结果 不论是成功还是失败

作用: 可以用来测试哪个请求快

        let p1 = Promise.resolve('aaa')
        let p2 = Promise.resolve('bbb')
        let p3 = Promise.resolve('ccc')
        let p4 = Promise.resolve('ddd')
        Promise.race([p1, p2, p3, p4]).then(res => {
            console.log(res); // aaa
        }).catch(err => {
            console.log(err);
        })

Promise.resolve()

    返回一个成功状态的promise 如果括号内有值 , 就会保存到promise的结果属性中 , 如果没有,则 为undefined  

       const p1  =  Promise.resolve(123)

Promise.reject()

  返回一个失败状态的promise

    const p1 = Promise.reject();