vue中Promise实现等待异步操作完成后再执行后面的内容

今天调了一个别人写的api,封装的和百褶裙似的,遇到一个异步方法,根本找不到最终处理的方法。

我这个人平时基本躺平,很难看进技术文章,所以Promise在我面前晃悠了很久,我也不去学他。直到需求来了,不得不学。

情景如下:

    func() {
      let data = this.getValue();
      console.log(res);
      if (res.code == 1) {
         console.log("成功");
      } else {
        console.log("失败");
      }
    },
    getValue(){
        var callback = {
            success: function (msg) {
		return JSON.parse(msg);
            },
            error: function (error) {
		alert("error:" + error);
            }
        }
        this.setVal(callback)
    }
    setVal(callback){//此方法不可操作的情况下
        setTimeout(() => {
          return callback.success({code:1})
        }, 2000);
    }

执行上述代码会发现,code未定义;就是因为setData是一个异步操作,此时进程没有走完,所以并不能获取到值,经过一番钻研学习后,找到了以下解决办法:

   async func() {
      let data = await this.getData();
      console.log(res);
      if (res.code == 1) {
         console.log("成功的操作");
      } else {
        console.log("失败的操作");
      }
    },
   async getVal(){
      var data;
      var promise = new Promise((res) => {
        var callback = {
            success: function (msg) {
		data = JSON.parse(msg);
		res(data);
            },
            error: function (error) {
		alert("error:" + error);
            }
        }
        this.setVal(callback)
      });
      await promise;
      return data;
   }
   setVal(callback){//此方法不可操作的情况下
        setTimeout(() => {
          return callback.success({code:1})
        }, 2000);
   }

大功告成!当然,这个方法只是我临时学习的一点拙劣把戏,如果在座的各位有更加优雅的实现方法,欢迎相互交流!