ES6之Promise解决VUE中异步传值问题

旧城等待， 2021-09-18 10:38 350阅读 0赞

背景：

在使用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_github.com_ruanyf_es6tutorial_search_utf8_E2_9C_93_q_Promise]

参考网址：[https://baijiahao.baidu.com/s?id=1596005633332556077&wfr=spider&for=pc][https_baijiahao.baidu.com_s_id_1596005633332556077_wfr_spider_for_pc]

VUE创建全局函数： [https://blog.csdn.net/qq\_42715494/article/details/87990879][https_blog.csdn.net_qq_42715494_article_details_87990879]

[https_github.com_ruanyf_es6tutorial_search_utf8_E2_9C_93_q_Promise]: https://github.com/ruanyf/es6tutorial/search?utf8=%E2%9C%93&q=Promise
[https_baijiahao.baidu.com_s_id_1596005633332556077_wfr_spider_for_pc]: https://baijiahao.baidu.com/s?id=1596005633332556077&wfr=spider&for=pc
[https_blog.csdn.net_qq_42715494_article_details_87990879]: https://blog.csdn.net/qq_42715494/article/details/87990879