关于promise:asyncawait和Promise的区别

async/await 和 Promise 都是异步办法，async/await 能更好的解决 then 链

async/await 采纳 同步的思维解决异步办法
栗子：我的项目中遇到的一个问题，mounted 时须要获取到全副的报警类型后，再获取已抉择的报警类型，最后做的是先调用 getAllAlarmTypeList()，而后 50ms 的延时再调用 getAlarmCheckedList()就不会报错，后通过 asynce/await 能够优化，且更容易了解。

应用 Promise 办法

mounted() {this.getAllAlarmTypeList()
setTimeout(this.handleAlarmTrendData, 50)

},
// 获取所有的报警类型

getAllAlarmTypeList() {
  let param = {subsystemType: 'XXXXX'}
  Api.getStatisticalAlarmTypes(param).then((res) => {if(res.value.length > 0) {// 代码})
      this.getAlarmCheckedList()}
  })
},

// 获取已抉择的报警类型

getAlarmCheckedList() {
  let param = {subsystemType: 'XXXXX'}
  Api.getCheckedAlarmTypeList(param).then(res => {if(res.value.length > 0) {// 代码}
  })
},

应用 async/await 办法：

// 获取所有的报警类型

getAllAlarmTypeList() {return new Promise(async (resolve, reject) => {
    let param = {subsystemType: 'XXXX'}
    try {let res = await Api.getStatisticalAlarmTypes(param)
      if(res.value.length > 0) {res.value = res.value.map((item) => {// 代码})
        resolve(res.value)
      } else {resolve([])
      }
    } catch (error) {console.error('获取报警类型失败' + error)
    }
  })
},

// 获取已抉择的报警类型

getAlarmCheckedList() {return new Promise(async (resolve, reject) => {
    let param = {subsystemType: 'XXXX'}
    try {let res = await Api.getCheckedAlarmTypeList(param)
      if(res.value.length > 0) {resolve(res.value)
      } else {resolve([])
      }
    } catch (error) {console.error('获取已选中报警类型失败' + error)
    }
  })
},

// mounted()调用 initData()

async initData() {let res = await this.getAllAlarmTypeList()
  this.allAlarmTypeList = res
  let res2 = await this.getAlarmCheckedList()
  this.allAlarmTypeList.forEach((item) => {// 代码代码}
  })
}

Api.js 文件，申请后端接口，是 async/await 和 Promise 专用代码
// 统计报警类型配置查问

  getStatisticalAlarmTypes (param) {return new Promise((resolve, reject) => {
  vue.resetAjax({
    method: "get",
    url: `evo-gmcommon/VERSION/config/alarmTypes/${param.subsystemType}`,
    onSuccess(rel) {resolve(rel.data.data)
    },
    onError(rel) {reject(rel)
    }
  })
})

},
// 查问抉择的报警类型

  getCheckedAlarmTypeList(param) {return new Promise((resolve, reject) => {
  vue.resetAjax({
    method: "get",
    url: `evo-gmcommon/VERSION/alarm/statistical/getTrendAlarmTypes/${param.subsystemType}`,
    onSuccess(rel) {resolve(rel.data.data)
    },
    onError(rel) {reject(rel)
    }
  })
})

},

能够这样了解，Promise 先调用全副类型 getAllAlarmTypeList()，.then()后在调用 getAlarmCheckedList()；用 async/await, await 要等前面的办法执行完后再执行下一句代码