侧边栏壁纸
博主头像
LYMTICS

海纳百川,有容乃大

  • 累计撰写 45 篇文章
  • 累计创建 37 个标签
  • 累计收到 19 条评论

目 录CONTENT

文章目录

Vue中获取Promise的返回值

LYMTICS
2021-04-16 / 0 评论 / 0 点赞 / 63 阅读 / 939 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-02-01,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

起因

今天用Vue写项目的时候, 有一个功能是用一个参数Id通过网络请求一个数据.

由于VueCLI中我用的网络请求插件是Axios, 默认会返回一个Promise对象, 导致我无法获取想要的数据.

尝试

直接return

function(id){
    // 网络请求
    getData(id).then(res=>{
        return res.data;
    })
}

返回值将是一个Object Promise类型, 这是因为Promise的返回值还是Promise, 以便于进行链式编程

通过一个数据临时保存

function(id){
    let data;
    // 网络请求
    getData(id).then(res=>{
        data = res.data;
    })
    return data;
}

这是因为Promise是异请求, 在进行Promise中的操作时,程序并不会阻塞, 而是会继续执行之后的操作,

因此, return语句可能会在getData之前执行

用await阻塞网络请求

知道了Promise的原理, 想出来上面说的情况的原因. 试着用async和await:

async function(id){
    let data;
    // 网络请求
    await getData(id).then(res=>{
        data = res.data;
    })
    return data;
}

这样return的对象还是Promise对象, 因为async本身是异步操作

正确做法

在data中定义一个变量, 保存结果

data(){
    return{
        tmp: '',
    }
}

function(id){
    // 网络请求
    getData(id).then(res=>{
        tmp = res.data
    })
}

这里之所以能工作,我觉得是因为有Vue的功劳:响应式编程,在数据变化(获取数据的之后)后进行渲染

其实假如是在一个一般的场景中,最正确的做法还是用Promise封装比较好。即:如果一个功能需要获取异步操作的数据,把这个功能整个封装成一个异步操作比较合适。

// 用ID获取DATA然后做一件事情,比如是dataFunc()
function(id){
    // 网络请求
    getData(id).then(res=>{
        dataFunc(res.data);
    })
    
}
function dataFunc(data){
    // 对data的功能
}
0

评论区