ES6之Promise解决VUE中异步传值问题
背景:在使用vue开发页面时,调用 checkWorkflow()方法时无法获取到该方法的返回值Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。语法:new Promise( function(resolve, reject) {...} /* executor */ );案例:修改前:JS代码:...
·
背景:
在使用vue开发页面时,调用 checkWorkflow()方法时无法获取到该方法的返回值
Promise 对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
语法:
new Promise( function(resolve, reject) {...} /* executor */ );
案例:
修改前:
JS代码:
export function checkWorkflow(modelId,routeName,userId){
let url = `${lz}/mtwf/provingBindingWf`;
let data = {
modelId : modelId,
routeName : routeName,
userId : userId,
}
post(url,data).then(retData =>{
if(retData.returnCode != 1){
Notification({
title: "消息",
message: "检查 工作流失败,请联系技术服务部",
type: "info"
});
}
return retData.returnData;
})
}
.VUE代码: 无法获取到返回值 retData=undefined
//调用 checkWorkflow方法
callCheckWorkflow(){
let modelId = this.modelId;
let routeName = this.routeName;
let userId = this.userInfo.userId;
let returnData = this.$checkWorkflow(modelId,routeName,userId);
console.log('返回值 returnData='+returnData);
if(returnData != true){
this.disabled = true;
this.$notify({
title: "消息",
message: "该申请未在工作流中,请联系管理员",
type: "info"
});
}
}
修改后:
JS代码:
export function checkWorkflow(modelId,routeName,userId){
return new Promise((resolve, reject)=>{
let url = `${lz}/mtwf/provingBindingWf`;
let data = {
modelId : modelId,
routeName : routeName,
userId : userId,
}
post(url,data).then(retData =>{
if(retData.returnCode != 1){
Notification({
title: "消息",
message: "检查 工作流失败,请联系技术服务部",
type: "info"
});
}
resolve(retData.returnData);
})
});
}
.VUE代码: 返回值 retData='OK'
//调用 checkWorkflow方法
callCheckWorkflow(){
this.$checkWorkflow(this.modelId,this.routeName,this.userInfo.userId).then(retData=>{
console.log('函数返回值 retData='+retData);
if(retData ==''){
this.disabled = true;
}else if(retData != 'OK'){
this.disabled = true;
this.$notify({
title: "消息",
message: "该申请未在工作流中,请联系管理员",
type: "info"
});
}
});
}
ES6官网查询到的:https://github.com/ruanyf/es6tutorial/search?utf8=%E2%9C%93&q=Promise
参考网址:https://baijiahao.baidu.com/s?id=1596005633332556077&wfr=spider&for=pc
VUE创建全局函数: https://blog.csdn.net/qq_42715494/article/details/87990879
更多推荐
已为社区贡献7条内容
所有评论(0)