promise获取数据出作用域后undefined

Question

            areaScrService.getBigdataData(subject).then((result) => {
                bigDataLists = result.data;
                console.log(bigDataLists);  //有值
                return areaScrService.getSubjectData();
            }).then((result) => {
                //初始化yemian
                initElements();
                //绑定事件
                _bindEvents();
            }).catch((error) => {
                console.log(error);
            });
            console.log(bigDataLists);  //undefined
    

我就想问问，拿到的数据为什么出不了then的作用域，就算赋给全局变量，在其他地方还是undefined 不能拿出来吗？ 或者说 这个值怎么放到vue的data（）{}里面，小白才用vue不熟，求解，谢谢各路大神~

Answer 1

var bigDataLists;
areaScrService.getBigdataData(subject).then((result) => {
    bigDataLists = result.data;
    console.log(bigDataLists);  //有值
    return areaScrService.getSubjectData();
}).then((result) => {
    //初始化yemian
    initElements();
    //绑定事件
    _bindEvents();
}).catch((error) => {
    console.log(error);
});
// 这里比上面的then里的方法更先执行，所以是undefined
console.log(bigDataLists);  //undefined

放入vue,data

{
data() {
    return {
        bigDataLists: null
    }
},
created() {
    areaScrService.getBigdataData(subject).then((result) => {
        this.bigDataLists = result.data;
    })
}
}

Answer 2

js 执行 异步的问题。

setTimeout(() => {
    console.log(bigDataLists);
}, 1000);

这样差不多就行输出了，或者使用 await

Answer 3

这个问题与vue无直接关系，是Promise执行机制的问题。推荐你看下这篇文章：八段代码彻底掌握Promise，看完之后应该就能解决你的问题了。