ES6中Promise保证执行完一个方法后再执行另外一个方法

场景:
		方法A是一个调用后端接口的方法,并将处理好的数据返回给全局变量res。
		方法B拿到处理好的数据res,并使用Echarts框架完成数据的渲染
存在问题:
		因为调用后端接口需要一定的时间,那么怎么保证执行完方法A 之后,再去执行方法B呢?

改善前做法:


created(){
		this.funcA()
		this.funcB()
}

methods: {
		funcA(){
	                this.$axios.get('http://127.0.0.1:8090/iot-cloud/influx/queryMonitorListById',{
	                    params: {
	                        id: "188460054949024400"
	                    }
	                }).then(res=>{
	                    //假设将处理好的数据返回给全局变量res,供方法B使用
	                    this.res = res
	                })
	            },
	
	     funcB(){
	          console.log("方法A提供的变量res真好用,好评")
	      }
}

改善后做法:


created() {
         	this.timeFN();
        },
        
methods: {
         timeFN(){
             this.funcA().then(() => {
                 this.funcB()
             })
         },

		 funcA(){
             return new Promise((resolve) => {
                  resolve(this.$axios.get('http://127.0.0.1:8090/iot-cloud/influx/queryMonitorListById',{
                      params: {
                          id: "188460054949024400"
                      }
                  }));
              })
          },

          funcB(){
              console.log("方法A提供的变量res真好用,好评")
          }
       }

总结:

添加了两出代码:在这里插入图片描述
在这里插入图片描述

OK!我完事了,拜拜!

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ES6Promise是处理异步操作的一种方式,它提供了一些常用的方法来处理异步操作的状态和结果。以下是一些常见的Promise方法: 1. Promise.resolve(value):创建一个已解决(fulfilled)状态的Promise对象,并将指定的值作为解决值。 2. Promise.reject(reason):创建一个已拒绝(rejected)状态的Promise对象,并将指定的原因作为拒绝值。 3. Promise.all(iterable):返回一个新的Promise对象,该对象在所有给定的promise都已解决时才解决,并将一个包含所有解决值的数组作为结果。 4. Promise.race(iterable):返回一个新的Promise对象,该对象在给定的promise有任何一个解决或拒绝时解决,并将该解决或拒绝值作为结果。 5. Promise.allSettled(iterable):返回一个新的Promise对象,该对象在所有给定的promise都已解决或拒绝时才解决,并将一个包含所有解决或拒绝结果的数组作为结果。 6. Promise.prototype.then(onFulfilled, onRejected):添加一个执行处理程序(callback)到Promise的解决或拒绝状态。返回一个新的Promise对象,可以在后续使用链式调用。 7. Promise.prototype.catch(onRejected):添加一个拒绝处理程序(callback)到Promise的拒绝状态。返回一个新的Promise对象,可以在后续使用链式调用。 8. Promise.prototype.finally(onFinally):添加一个处理程序(callback),在Promise无论是解决还是拒绝状态时都会执行。返回一个新的Promise对象,可以在后续使用链式调用。 这些方法Promise对象的一些常见操作,可以根据实际需求选择使用。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值