promise解决异步执行使项目可以同步执行,js中执行完某个方法后再执行另一个方法,实现顺序执行

1.遇到问题

        这是我在开发项目中遇到的一个问题,多层for循环嵌套执行,最后想返回执行后的结果,可是还没等执行完所有循环就直接返回了原来的结果。想要让所有的for循环循环完了后处理了结果后再执行返回。

2.解析

        promise解决异步执行使项目可以同步执行,js中执行完某个方法后再执行另一个方法,实现顺序执行_第1张图片

        数据结构分析:每个skus数组中的每个对象有pricePropList数组,pricePropList数组下的价格和数量要进行判断,在点击保存的时候要进行判断,要求每一个skus中的pricePropList下的price和qty都不能是0,如果有一组中的一个为0则要提示给用户不能有0,

3.利用promise同步执行的特点解决问题

        废话不多说直接上代码:

let isShow = false //利用开闭原则,检验执行是否完成
saveBtnClick() { //点击的保存按钮方法
    这里执行returnPriceList,执行完方法体内的所有后才会去执行then返回的
    this.returnPriceList().then(res => {
		if (res) {
			this.$api.msg('有价格和数量为零')
		} else {
			_this.$store.state.skus = _this.skus
			uni.navigateBack({
				delta: 1
			})
		}
	})
},
returnPriceList() {	
//定义promise 
    return new Promise(resolve => {
	    let isShow = false
		for (var i = 0; i < _this.skus.length; i++) {
			_this.skus[i].pricePropList.forEach(item => {
			    if (!item.qty || !item.price) {
				    isShow = true
			    }
	        })
		}
		resolve(isShow)
	})
},

4.promise方法执行解析

 

function fn1(){
    console.log('fn1')
    fn2()
    fn3()
}
function fn2(){
    setTimeout(function(){
        console.log('fn2')
    },4000)
}
function fn3(){
    setTimeout(function(){
        console.log('fn3')
    },2000)
}
fn1()
//执行结果
fn1
fn3
fn2

 使用promise包装后

function fn1(){
    console.log('fn1')
    fn2().then(res=>{
        console.log('执行完了fn2')
        fn3()
    })
}
function fn2(){
    return new Promise(resolve=>{
        setTimeout(function(){
            console.log('fn2')
            resolve()
        },4000)
    })
}
function fn3(){
    setTimeout(function(){
        console.log('fn3')
    },2000)
}
fn1()

//执行结果
fn1
fn2
执行完了fn2
fn3

到此结束,欢迎学习,大家一起探讨!

你可能感兴趣的:(前端,前端,javascript,开发语言,vue.js,es6,angular)