将res.data分配给变量返回null

问题描述

我正在尝试向API发出GET请求，将响应分配给变量并进行console.log记录。目前，我在控制台中得到null，但我不知道为什么。当我只使用console.log res.data时，就得到了数据，但是由于某种原因，该值没有分配给变量allBeers，如何保存对该变量的响应并使用它？

这是我的代码：

<script>
import axios from "axios";

export default {
  name: "BeerList",data() {
    return {
      allBeers: null
    };
  },created() {
    axios.get("https://api.punkapi.com/v2/beers").then(res => {
      this.allBeers = res.data;
    });

    console.log(this.allBeers);
  }
};
</script>

解决方法

尝试此解决方案。 axios.get是一个承诺，console.log将在axios.get完成之前发生。这就是为什么您得到null。

<script>
import axios from "axios";

export default {
  name: "BeerList",data() {
    return {
      allBeers: null
    };
  },created() {
    axios.get("https://api.punkapi.com/v2/beers").then(res => {
      this.allBeers = res.data;
      console.log(this.allBeers);
    });  
  }
};
</script>

您正在正确保存对“ allBeers”变量的响应。 “如何使用它”部分取决于您要对数据执行的操作。 Vue的“数据”是反应性的，因此，如果要在更改时将其打印到控制台，则应在组件中使用Vue的观察器：

watch: {
    allBeers: function(value) {
        console.log("my new beers:");
        console.log(value);
    }
}

由于Vue是UI框架，您可能需要使用新数据更新html，在这种情况下，您需要向组件中添加html模板-当“ allBeers”更改时，它将自动重新呈现：

template: `<span> {{ allBeers }} </span>`

javascript vue.js