vue-resource 如何return获取的值？

Question

各位大佬，请教一个问题。我在做一个工作台的项目，要求所有的数据请求都放到一个js文件里面做管理。我现在执行这里的请求数据方法，后无法获取到return的值。请帮忙看看怎么回事。谢谢啦！

import Vue from 'vue'
import VueResource from "vue-resource"
Vue.use(VueResource);
import store from "@/vuex.js";
var datap={
    get:{
        header(){
            var url="static/data/header.json"
            Vue.http.get(url).then((response)=>{
                 var data=JSON.parse(response.bodyText);
                 store.state.homeNav=data.nav;
                store.state.headerUserInfo=data.userInfo;
                store.state.headerMessage=data.message;
                **return data;**        //这里无效！        
            },error=>{
                //console.log(err);
                //return error.json();
            }).then(result => {
                //console.log(result);
            })
        }
    },
    post:{
        
    }    
}
export {datap};

Answer 1

你这个方法是没有回调的，只有 then 去获取返回的值：

var test=Vue.http.get(url).then((response)=>{
    ----------
    //return data;       //这里不要写return数据
    return Promise.resolve(data) // 利用Promise返回
},error=>{
    //console.log(err);
    //return error.json();
}).then(result => {
    //这里获取的result其实就是上面Promise.resolve(data)返回的数据，在这里拿到
    //console.log(result);
})

从这里可以看出你对then的链式写法还不太熟悉，推荐你看看ES6新语法Promise，尽量少用原来的回调地狱