javascript - Vue.js 2 和 Axios 范围问题

Question

我以前处理过这个“问题”，但我真的不记得如何正确地获得结果。我正在使用 Vue 2 将一些数据加载到我可以在 HTML 端加载的变量中:

window.Vue = require('vue');
window.axios = require('axios');

const app = new Vue({
    el: '#app',
    data: {
        operaciones: [],
        sopts: []
    },
    created: function() {
        this.loadOperationTypes();
        console.log(this.operaciones); <-- SC
    },
    methods: {
        loadOperationTypes: function() {
            axios.post('/api/operaciones')
            .then(response => {
                console.log(response.data); <-- FC
                this.operaciones = response.data
            })
            .catch(error => {
                this.operaciones = error;
            });
        }
    }
});

如果我在 Axios 函数范围 (FC) 中编写 console.log(response.data)，它会打印:

但如果我在 created_function() {} 范围内编写 console.log(response.data)，它会打印:

我已经试过这样使用了:

axios.post('/api/operaciones')
.then(response => {
    console.log(response.data);
    app.operaciones = response.data
})

和

var $this = this;
axios.post('/api/operaciones')
.then(response => {
    console.log(response.data);
    $this.operaciones = response.data
})

但是是一样的，有什么线索吗？

提前致谢。

Answer 1

这实际上是一个独立于范围的问题。您在问题中尝试的任何解决方案都可以正确设置 this.operaciones。问题是您正在处理异步操作。

线

console.log(this.operaciones);

在 created 中将总是记录一个空数组。那是因为 loadOperationTypes 执行的是异步操作；这意味着它需要时间。

您似乎期望 loadOperationTypes 中的所有内容都将在 console.log 执行之前完成，但事实并非如此。 loadOperationTypes 将启动 post 到服务器，然后代码将继续并执行 console.log。

一旦在稍后的某个时间点从服务器收到响应，operaciones 就会填充响应。

console.clear()

const app = new Vue({
    el: '#app',
    data: {
        operaciones: [],
        sopts: []
    },
    created: function() {
        this.loadOperationTypes();
        console.log("THIS WILL ALWAYS BE AN EMPTY ARRAY", this.operaciones);
    },
    methods: {
        loadOperationTypes: function() {
            axios.post('https://httpbin.org/post', ["some", "data"])
            .then(response => {
                console.log("THIS SHOULD HAVE DATA", response.data.json);
                this.operaciones = response.data.json
            })
            .catch(error => {
                this.operaciones = error;
            });
        }
    },
    watch: {
      operaciones(newVal){
        console.log("THIS WILL HAVE DATA WHEN operaciones IS POPULATED", newVal)
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>

<div id="app"></div>