promise的粗浅理解以及在项目中的实际应用promise是es6中新增的处理异步问题的对象其中存在三种状态pend

promise的理解

promise是es6中新增的处理异步问题的对象

其中存在三种状态pending（加载中），resolve（完成，又称fulfilled），rejected（失败），只有pending->resolve,或者pending->reject两种状态,只有当前的异步操作可以改变状态，其余操作不会改变。一旦状态发生改变，就一直保持这个状态，后续多次监听也可以得到结果

弊端

1. 一旦新建就立即执行
1. 处于pending状态不好判断具体状态
1. 不设置resolve(),reject()的回调函数会跑错

返回值

promise 对象原型上有一个 then 方法，then 方法会返回一个新的 promise 对象，并且将回调函数 return 的结果作为该 promise的结果，then 方法会在一个 promise 状态被扭转为 resolve 或 rejected 时被调用。then 方法的参数为两个函数，分别为 promise 对象的状态被扭转为 resolve 和 rejected 对应的回调函数。

all和race的区别

Promise.all() // 所有的都有完成，相当于且
Promise.race() // 完成一个即可，相当于或，且谁快就执行谁

实例

    // 金额的计算
    calculatSettlementRatio(row, value = '') {
      return new Promise((res, rej) => {
        calculateSettlementRatio({
          amountSettled: row.shouldSettlement,
          reconciliationAmount: value || row.currentAmount
        }).then(({ data }) => {
        //抛出结果，多个参数可以用对象抛出去
          res(data.result) //假设这里data.result为20，即把20抛出去了
        }).catch(()=>{
            rej()
        })
      })
    },

 // 输入金额算比例
    changeCurrentSettlementRatio(row, value) {
      //调用promise函数会抛出的新的promise，结果存储于res中，即res = 20
      this.calculateCurrentSettlementRatio(row, value).then((res) => {
        this.$set(row, 'currentRatio', res)
      })
    },
}

结合elemenui封装弹出框
const rejectToReceivable = (content) => {
  return new Promise(resolve => {
    this.$confirm(content, '提示', {
      type: 'warning'
    }).then(e => {
      resolve()
   }).catch(e => {
      resolve()
  })
   })
 }
const { projectId, reconId, reconStatus, receivableTotalt, reconciliationTotal } = this.topData
  if (+reconStatus !== 1) {
    return rejectToReceivable('a')
  }
 if (+receivableTotal < +reconciliationTotal) {
   return rejectToReceivable('b')
 }
  if (+receivableTotal === 0) {
    return rejectToReceivable('c')
  }

调用方法

单个调用
链式调用