async/await和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要等后面的方法执行完后再执行下一句代码