vue 中出现异步 promise&async 和awiat的使用

想要飞翔的pig

已于 2023-03-10 17:56:10 修改

阅读量450

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端 promise

于 2023-03-10 16:41:03 首次发布

本文链接：https://blog.csdn.net/weixin_53587375/article/details/129445530

版权

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

文章讲述了在项目中遇到的异步问题，即接口调用未完成就执行后续操作。通过引入Promise和使用.then方法确保异步操作完成后执行特定代码。此外，还介绍了使用async/await来更清晰地管理异步流程，以及如何用try-catch处理可能出现的错误。提供了相关博客链接作为详细参考。

摘要由CSDN通过智能技术生成

一、项目中出现异步问题，接口里边的this.queryLinkage()还未执行完，就开始执行this.$parent.handleShow(this.placeList, this.detailedInformation)

在这里插入图片描述

二、解决办法 new promise（）

 // 数组对象去重
       unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr.type) && res.set(arr.type,1));
      },
      // 解决办法：return 出去这个new promise ，在调用queryLinkage()这个方法的时候
       			  使用.then方法，.then中的res返回为true的时候，再去执行
     			  this.$parent.handleShow(this.placeList, this.detailedInformation);
    queryLinkage() {
      let result = new Promise((resolve) => {
      getAlarmCap()
        .then((res) => {
          let algsList = []
          res.data.alarm_type_list.forEach((item) => {
            algsList.push(...item.minor_type);
          });
            this.placeList = this.unique(algsList)
            resolve(true)
        })
        .catch(() => {});
      })
      return result
    },
    //点击方法
  handleOpen(record) {
      this.detailedInformation =  record
      this.placeList = [];
    this.queryLinkage().then(()=>{
        this.$parent.handleShow(this.placeList, this.detailedInformation);
      });
    },

三、补充一下，也可以把这个.then换成async 和await

async handleOpen(record) {
      this.detailedInformation =  record
      this.placeList = [];
      await this.queryLinkage()
      this.$parent.handleShow(this.placeList, this.detailedInformation);
    },

四、try catch

   async queryLinkage() {

try{
  let res = await getAlarmCap()
  let algsList = []
  res.data.alarm_type_list.forEach((item) => {
    algsList.push(...item.minor_type);
  });
    this.placeList = this.unique(algsList)
}catch(err){
  console.log(err)
}
}

五、详细参考

https://blog.csdn.net/weixin_44871749/article/details/123621556?spm=1001.2014.3001.5506
https://blog.csdn.net/weixin_47686269/article/details/109624790?spm=1001.2014.3001.5506