vue在一个方法执行完后执行另一个方法
vue在一个方法执行完后执行另一个方法
用Promise来实现。
Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况
ES7中新提出async搭配await,建议使用async搭配await。
使用方法:async/await使用方法
示例1:
function2(){
// 你的逻辑代码
return Promise.resolve(/* 这里是需要返回的数据*/)
}
function3(){
// 你的逻辑代码
return Promise.resolve(/* 这里是需要返回的数据*/)
}
// 调用
function1(){
this.function2().then(val => {
this.function3();
});
}
示例2:
function timeout1(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
})
}
// 因为上面函数返回是的Promise对象,所以直接使用链式方法then时,是在Promise对象内的函数执行完之后执行的,这样就可以达到上面同样的结果
timeout1(5000).then(() => {
console.log('timeout1'); // 5s之后打印出'timeout1'
})
示例3:
uniapp中request请求封装
function request(url, data = {}, method = "GET") {
return new Promise(function(resolve, reject) {
uni.request({
url: url,
data: data,
method: method,
header: {
'Content-Type': 'application/json;charset=UTF-8',
'token': uni.getStorageSync('token')
},
success: function(res) {
if (res.data.code == 401) {
//需要登录后才可以操作
uni.showModal({
title: '',
content: '请重新登录',
success: function(res) {
uni.setStorageSync('token', null)
if (res.confirm) {
uni.redirectTo({
url: '/pages/index/page1-9/page1-9'
});
}
}
});
} else {
resolve(res.data);
}
},
fail: function(err) {
uni.showToast({
icon: 'none',
duration: 3000,
title: '网络错误'
})
reject(err)
console.log("failed")
}
})
});
}
request(api.sendSms, {mobile: this.smsbtn.mobile}, 'GET').then(res => {
if (res.code === 0) {
uni.showToast({
icon: 'success',
title: '发送成功'
});
} else {
uni.showToast({
icon: 'none',
title: res.msg
});
}
});