不能用vue axios设置数据答案

【问题标题】：Cant set data with vue axios不能用vue axios设置数据
【发布时间】：2019-02-17 23:45:27
【问题描述】：

我正在开发一个带有 vue 组件的 laravel 项目。当我在组件中使用 axios 执行获取请求时，我无法将数据变量设置为响应。这些是我的方法：

    methods: {

    location ()
    {

        console.log('location')

    },

    getCategories () {

        axios.get(this.baseUrl + '/api/search/categories').then((response) => {

            this.categories = response.data

            console.log(response.data)

        }).catch((e) => {

            console.log(e)

        })

    }

}

这是我的data()

    data() {

    return {

        searchTitle: null,
        searchLocatie: null,
        searchCategorie: null,
        categories: [],
        //baseUrl: 'https://sdinbeeld.frb.io/',
        baseUrl: 'http://localhost:8888/sdinbeeld/public/'

    };

},

我想设置this.categories等于response.data

但是当我在mounted() 部分执行console.log(this.categories) 时，它只返回一个空数组

有人知道如何解决这个问题吗？

【问题讨论】：

这是我的mounted()
mounted() { this.getCategories() console.log(this.categories) },
How do I return the response from an asynchronous call?的可能重复

标签： laravel vue.js axios

【解决方案1】：

这是因为在 HTTP 请求完成之前触发了挂载的钩子。所以到那时，它仍然是一个空数组。这是因为 Ajax 请求是异步的。这意味着代码在请求进行时仍然可以执行。在您的 getCategories() 方法中，如果您将代码更改为：

axios.get(this.baseUrl + '/api/search/categories').then((response) => {

        this.categories = response.data

        console.log(response.data);
        console.log(this.categories);

    }).catch((e) => {

        console.log(e)

    })

一旦请求完成，您将看到它会注销正确的值。

【讨论】：

【解决方案2】：

因为 axios.get 返回一个异步操作的promise，因此您无法获得this.getCategories()以下的新值

你可以这样做

methods: {
  async getCategories() {
    try {
      const response = await axios.get(this.baseUrl + '/api/search/categories');
      this.categories = response.data;
      console.log(response.data);
    } catch (e) {
      console.log(e);
    }
  },
},
async mounted() {
  await this.getCategories();
  console.log(this.categories);
},

【讨论】：