Promise-详解

1.什么是Promise

   是一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数，可以链式调用降低了操作难度

2.Promise用法

实例化:

1.参数:Promise构造函数接收一个函数作为参数，也就是回调函数；该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数，reject作为失败的回调函数。

promise(function(resolve,reject))

2.三种异步操作的状态:

pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。

实例方法:

then(res=>{}) 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
        参数：回调函数，回调函数的参数为resolve函数传递过来的值
        返回值：返回一个新的Promise实例对象，因此可以使用链式调用

catch(err=>{}) 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
        参数：回调函数，回调函数的参数为reject函数传递过来的值
        返回值：返回一个新的Promise实例对象，因此可以使用链式调用

finally()无论异步操作执行成功失败与否，都会执行该回调
        参数：回调函数
        返回值：返回一个新的Promise实例对象

3.例子:

let promise = new Promise((resolve, reject) => {
      if (3 > 2) {
        resolve('success')
      } else {
        reject('error')
      }

    })
    console.log(promise, '承诺对象');
// 实例方法 成员方法
    // resolve由then方法提供 reject由catch提供方法提供
    // then 一个参数：请求成功的回调  两个参数：一个成功、一个失败
    // 1、then含一个参数
    promise.then(
      // 执行成功回调函数
      (res) => {
        console.log(res, '请求成功');
      }

    ).catch(
      // 执行失败的回调函数
      (err) => {
        console.log(err, '请求失败');
      }
    ).finally(
      () => {
        console.log('最终执行');
      }
    )

    // 2、then含两个参数
    // promise.then(res => {
    //   console.log(res, '请求成功');
    // }, err => {
    //   console.log(err, '请求失败');
    // })

3.使用Promise封装ajax

需求:当我们需要发送多个请求时,可以采用工厂模式将ajax封装起来

    // 创建多个承诺对象的实例  
    function promise(method, url, obj) {
      return new Promise((reslove, reject) => {
        // 封装ajax
        let xhr = new XMLHttpRequest()
        // 打开一个连接
        xhr.open(method, url)
        // 发送请求
        xhr.send()
        // 接收响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              // 代表请求成功
              reslove(xhr.responseText)
            } else {
              // 代表请求失败
              reject(xhr.responseText)
            }
          }
        }
      })
    }

    let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles')
    let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll')
    // 1、实例方法
    p1.then(res => {
      console.log(res, '响应1');
    })
    p2.then(res => {
      console.log(res, '响应2');
    })

4.Promise的静态方法

定义:静态方法只能由构造函数本身去调用

Promise.all([p1,p2]) 

参数：数组，数组中的元素为Promise实例

返回值：Promise实例,当p1,p2状态都为fulfilled时候，该实例的状态才为fulfilled，此时p1，p2的返回值组成一个数组，传递给该实例的回调函数；只要p1，p2的返回值有一个变为rejected，该实例状态为rejected;

Promise.race([p1,p2]) 赛跑返回先请求成功的实例

参数：数组，数组中的元素为Promise实例 返回值：Promise实例,当p1,p2之中有一个实例率先改变状态，该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给该实例的回调函数。

Promise.any([p1,p2])

参数：数组，数组中的元素为Promise实例 返回值：Promise实例,只要p1,p2状态有一个变为fulfilled，该实例的状态为fulfilled；p1，p2状态都变为rejected，该实例状态才为rejected

静态方法的例子:

    // 创建多个承诺对象的实例  
    function promise(method, url, obj) {
      return new Promise((reslove, reject) => {
        // 封装ajax
        let xhr = new XMLHttpRequest()
        // 打开一个连接
        xhr.open(method, url)
        // 发送请求
        xhr.send()
        // 接收响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              // 代表请求成功
              reslove(xhr.responseText)
            } else {
              // 代表请求失败
              reject(xhr.responseText)
            }
          }
        }
      })
    }

    let p1 = promise('get', 'http://121.199.0.35:8888/index/article/findCategoryArticles')
    let p2 = promise('get', 'http://121.199.0.35:8888/index/carousel/findAll')
    // console.log(p1);
    // console.log(p2);
    // 2、静态方法 只能由构造函数本身去调用
    // 2.1 all-只有请求全部成功才返回 参数由实例组成的数组 返回值：返回promise实例  
    // let res = Promise.all([p1, p2])

    // 2.2 any-任意一个实例状态成功则返回成功实例 参数由实例组成的数组 返回值：返回promise实例 
    // let res = Promise.any([p1, p2])

    // 2.3 race-返回先成功的实例 参数由实例组成的数组 返回值：返回promise实例 
    // let res = Promise.race([p1, p2])

    // 2.4 allSettle-
    /*all和allSettle的区别 
    1.返回的处理格式问题 array:[{},{}]
    2.all 实例 pendding
    */
    // let res = Promise.allSettled([p1, p2])


    console.log(res);
    res.then(res => {
      console.log(res, '请求成功');
    })