H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】Promise的值获取问题

var test = new Promise(function(resolve,reject) {
    // 比如一个URL请求我从response获取到了数据
    let data = "this is POST data";
    let error_msg = "this is POST error";
    // true 是服务器返回的状态码如200以及判断data数据是不是为null
    if (true){    
        resolve(data)
    }else{
        reject(error_msg)
    }
})

// 从上面我写了一个 Promise 对象 做了相关请求,现在我要调用,并做相关
// 操作

// 1.我说下我的第一个问题我怎么能获取到value或者error信息?
// 2.如果获取不到的话,post返回值,我对于我来说意义不大了!

function debugTest(testPost) {
    testPost.then(function(value) {
        console.log(value)
    },function(error) {
        console.log(error)
    })
}
debugTest(test)

// 我说下我目前的痛苦地方,我以为js编程是很愉快的,但是。。。。
// 比如我现在想调用后端接口

<div id="app">
{{showMsg()}}{{msg}}
</div>

var Vue = new Vue({
    el:"#app",
    data:{
        msg:""
    },
    methods:{
        getPostData:function() {
            axios.post("/api/data",{ // {”data":“true"}

            })
            .then(function(response) {
                if(response.status === 200){
                    return response.data.data
                }
            })
            .catch(function(error) {
                return error
            })
        },
        showMsg:function() {
            let result = this.getPostData();
            if (result === "true"){
                this.msg = "Post is success !"
            } else {
                this.msg = result;
            }
        }
    }
})

// 比如我现在想用axios调用这个接口,由于axios是异步的,所以
// 还没有等到response返回,我们就会执行showMsg的if阶段!
// 那么就会不是我想要的样子 那么就需要Promise

<div id="app">
{{showMsg()}}{{msg}}
</div>

var Vue = new Vue({
    el:"#app",
    data:{
        msg:""
    },
    methods:{
        getPostData:function() {
           return new Promise(function(resolve,reject) {
                axios.post("/api/data",{ // {”data":“true"}

            })
            .then(function(response) {
                if(response.status === 200){
                    resolve(response.data.data)
                }
            })
            .catch(function(error) {
                return error
            })
            })
        },
        showMsg:function() {
            let result = this.getPostData();
            result.then(function(value) {
                this.msg = value    // 不行。获取不到msg值
            })
        }
    }
})

// 所以我很烦恼 我看了说用async和await
// 但是await返回的也是Promise对象啊。。。。
// 所以我很苦恼,大家是怎么再异步操作中先获取到异步操作中的值,然后再进行下面的操作
// 其实就是异步变同步

回答:

改成async的话

       getPostData:function() {
           return axios.post("/api/data",{ // {”data":“true"}})
        },
        showMsg:async function() {
            try{
                let result = await this.getPostData();
                if(result.status === 200){
                    this.msg=result.data.data;
                }
           }catch(err){
               
           }
        }

本文地址:H5W3 » 【前端问题精选】Promise的值获取问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址