Question

我在axios.all()上用mounted()调用了两个请求，但无法将响应数据分配给我的Vue数据。为了了解发生了什么，我添加了一些console.log()。

app = new Vue({
    data: {
        countries: [],
        cities: [],
    },
    methods: {
        getCountries() {
            return axios({
                method: 'get',
                url: '/utils/countries/',
            })
        },
        getCities() {
            return axios({
                method: 'get',
                url: '/utils/cities/',
            })
        }
    },
    mounted() {
        console.log('1 ' + this.cities)
        axios.all([this.getCountries(), this.getCities()])
        .then(axios.spread(function (countries, cities) {
            this.countries = countries.data;
            this.cities = cities.data;
            console.log('2 ' + this.cities)
        }))
        .catch(error => console.log(error));
        console.log('3 ' + this.cities)
    }
});

输出：

1
3
2 [object Object]...

我的呼叫成功，但是this.cities和this.countries仍然为空。如何将他们的响应数据传递给他们？

Answer 1

Axios回调中的this关键字可能引用其自身功能的词法上下文。因此，您正在为错误的对象分配cities和countries属性。这就是为什么这些属性在Vue组件上保持空白的原因。

通过使用箭头函数，this将绑定到封闭的词法上下文，在这种情况下，即您的Vue组件。

尝试一下：

.then(axios.spread((countries, cities) => {
    this.countries = countries.data;
    this.cities = cities.data;
}))

在axios.all（）之后将数据分配给Vue实例

1 个答案: