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

1 声望
0 粉丝
0 条评论
推荐阅读
基于promise的阻塞式队列设计
设计阻塞队列的缘由是因为在做业务时遇见庞大的资源列表加载问题,我们的业务主要是媒体资源的加载。http 1.0的时候大部分浏览器支持最大并行数量是6个,http 2.0的时候有所提升,HTTP/2.0理论上可以在一个TCP连...

H_H_code3阅读 1.5k

Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。

后除2阅读 789

百万并发场景中倒排索引与位图计算的实践
Promise时效控单系统作为时效域的控制系统,在用户下单前、下单后等多个节点均提供服务,是用户下单黄金链路上的重要节点;控单系统主要逻辑是针对用户请求从规则库中找出符合条件的最优规则,并将该规则的时效控...

京东云开发者1阅读 366

封面图
从 await-to-js 到 try-run-js
之前在做 code review 时候发现有同事使用 try catch 包装了一堆异步代码,于是个人就觉得很奇怪,难道不应该只 catch 可能出问题的代码吗?同事告诉我说 try catch 太细的话会出现内外作用域不一致,需要提前声...

jump__jump阅读 991

Promise基础(消化错误和抛出错误)
在这两个回调中 return xxx ,相当于调用 return new Promise((resolve) => resolve(xxx));

uccs1阅读 872

alicdn边缘节点不稳定导致页面崩溃问题
某工作日,线上某用户向客服专员反馈没法正常访问“查看报价页面”,页面内容没有呈现。客服专员收到反馈后,将问题转交给SRE处理。很奇怪的是,SRE访问生产环境“查看报价页面”显示正常,为了进一步分析定位问题,S...

记得要微笑阅读 743

php 实现 Promise.all 和 Promise.race
测试 {代码...} 结果 {代码...} 实现 {代码...}

何一鸣阅读 641

1 声望
0 粉丝
宣传栏