Promise

一、Promise是什么？

promise是对象，它的状态不受外界影响，代表一个异步操作

二、异步的操作由哪些？

• setTimeout 延时调用，可以让这个时间延迟，然后去触发
• setInterval 间歇调用，每隔多长时间就执行一次
• ajax
• 图片加载
• 文件操作

  三、promise状态

1. pending 进行中
2. fulfilled(resolve) 成功的状态
3. rejected失败

   四、优缺点

• 优点：

           promise对象，可以将异步操作以同步操作流程表达出来，避免了层层嵌套的回调函数，解决回调地狱的问题，用法上链式调用

• 缺点：

          1.无法取消promise，一旦新建就会立即执行，无法中途取消<br />              2.不设置回调函数，promise内部抛出的错误，反应不到外部<br />              3.pendding状态时，无法得知进展到哪一个阶段

  五、promise的原型对象（实例）

  ```javascript let p1= new Promise() p1.then()//接收成功的回调 p1.then(res(接收成功的信息),error(接收失败的信息)) p1.catch()//接收错误的回调 p1.catch(res(接收成功的信息),error(接收失败的信息)) p1.finally()//无论成功失败，都会触发

<a name="klGf1"></a>
#### 六、promise构造函数上的方法，不能用实例来调用
- Promise.all()
```javascript
多个promise实例包装成一个实例，所有的状态都成功才会调用.then,只要由一个不成功就会调用.catch()
Promise.all([axios.get('轮播图'),axios.get('列表')]).then(res=>{
  res[0]//轮播图
  res[1]//列表
})
-------------------------------------------------------------------------------------------
   function water() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("烧水");//成功
          }, 1000);
        });
      }
      function cut() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            reject("切菜");//错误
          }, 1000);
        });
      }
      Promise.all([water(), cut()]).then(res => {
        //烧水和切菜的结果都是resolve()成功的时候，Promise.all().then才会执行，有其中一个不成功，不执行
        console.log(res);
      });

• promise.race() ```javascript Promise.race([p1,p2,p3])接收的时数组，那个结果获取的快，就返回那个结果，无论结果是成功/失败 使用场景：

• 多台服务器部署同样的服务端代码，假设要获取商品列表的接口
• 在race中写上所有服务器中的查询商品列表的接口地址，那个服务器响应快，就从那个服务器拿数据。

function water() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("烧水");
      }, 2000);
    });
  }
  function cut() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("切菜");
      }, 1000);
    });
  }
  Promise.race([water(), cut()]).then(res => {
 //哪一个结果返回的快，就返回那个结果。
    console.log(res);['切菜','烧水']
  });

- promise.resolve()
- promise.reject()
```javascript
let p=new Promise((resolve,reject)=>{
  // resolve('成功')
  reject('失败')
})
console.log(p);// Promise {<rejected>: "失败"}
p.then(res=>{
  console.log(res);
}).catch(error=>{
  console.log(error);
})
结论：状态只能从pendding-->成功||pendding-->失败
console.dir(Promise)可以获取到Promise构造函数上的属性和方法
console.log()会在浏览器控制台打印出相关信息

举例：闯关消消乐

<script>
      function play(timer, key = 1) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            key++; //第二关的要是
            resolve('成功的信息');
            reject('失败的信息')
          }, timer);
        });
      }
      play(1000).then(two => {
        console.log('第二关的钥匙',two);
        return play(2000, two);//第三关能用，否则接收不到参数
      }).then(three=>{
          console.log(`第三关的钥匙 ${three}`);
        //   return play(3000,three)
      }).catch(error=>{
          console.log(error);//只有状态是失败的时候，才走error
      });
    </script>

七、简单封装promise

  <script>
      class MyPromise {
        constructor(callback) {
          this.status = "pending"; //进行中
          this.val = ""; //成功的信息
          this.error = ""; //失败的信息
          // 成功的函数
          const resolve = val => {
            if (this.status === "pending") {
              this.status = "fulfiled"; //把状态变成成功
              this.val = val;
            }
          };
          // 失败的函数
          const reject = error => {
            if (this.status === "pending") {
              this.status = "rejected"; //让状态等于失败
              this.error = error;
            }
          };
          callback(resolve, reject); //一进来就触发
        }
        //成功的回调
        then(onResolve, onFail) {
          //   onResolve(this.val);
          if (this.status === "fulfiled") {
            onResolve(this.val);
          } else {
            onFail(this.error);
          }
        }
      }
      let p = new MyPromise((resolve, reject) => {
        resolve("成功的信息"); //想更换结果，就修改这两个状态
        // reject("失败的信息");
      }).then(
        res => {
          console.log(res);
        },
        error => {
          console.log(error);
        }
      );
    </script>

Promise.allSettled 
使用场景：首次进入的时候需要那个能返回数据就用那个，并且要对应证型下的高亮 知道那个是高亮的证型 会把所有场景的字段的接口都掉一次，
  let requestlist = []
    this.syndromeTypeData.forEach((item) => {
        requestlist.push(
          this.$Request.drivingSchool({
            url: this.$Port.drivingSchool.smallProject,
            method: 'post',
            data: { schoolId: store.getters['user/userInfo'].schoolId, syndromeType: item.label } //68
          })
        )
      })
            // TODO:requestlist接受的是一个数组
      Promise.allSettled(requestlist).then((res) => {
        res.forEach((item, index) => {
                //首次进入的时候需要那个能返回数据就用那个
          if (item.value && item.value.data && item.value.data.length) {
            this.syndrome = this.syndromeTypeData[index].label
            item.value.data.forEach((item) => {
              if (item.subject == 'subject2') {
                let { isMustFull, ...other } = item
                this.subject2Arr.push({
                  isMustFull: isMustFull ? true : false,
                  ...other
                })
              } else {
                this.subject2Arr.push({
                  isMustFull: isMustFull ? true : false,
                  ...other
                })
              }
            })
                        //并且要对应证型下的高亮 知道那个是高亮的证型
            this.currentIndex = index
          }
        })
      })