Vue中获取Promise的返回值

起因

今天用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的功能
}