Question

当前，我正在尝试从api获取数据并将其读取到数组中。问题是当我从api记录数据响应数据时，它显示了数据。我将变量的值分配给等待中的数据。当我console.log时，它表明变量的值过大。我尝试了async/await。已安装

"babel-plugin-transform-regenerator": "^6.26.0",
"babel-polyfill": "^6.26.0"

const baseUrl = "http://...";
    export default {
      name: "report",
      data() {
        return {
          selected: "",
          categories: []
        };
      },
      created() {},
      methods: {
        async getCategories() {
          this.categories = await axios
            .get(`${baseUrl}/feedback/search`)
            .then(res => {
              return res.data;
            });
        }
      },
      mounted() {
        this.getCategories(); // removed and tried adding this line again
        console.log("cat ", this.categories);
      }
    };

这就是我得到的：cat -> [__ob__: Observer] 这种方法也似乎没有帮助。我在做什么错了？

我在这个问题上苦苦挣扎了数小时。.检查了stackoverflow中的许多选项，但是似乎没有一个起作用（或者我做错了什么）。我是vuejs的新手，我很乐意回答！

Answer 1

您要在this.categories解决之前登录this.getCategories()，在这种情况下this.categories仍然是一个空数组。请注意__ob__属性是Vue自动插入的，并用于反应。

您应该预先await该方法：

async mounted() {
  await this.getCategories();
  console.log("cat ", this.categories);
}

demo

Answer 2

您可以尝试一下吗？

const baseUrl = "http://...";
export default {
  name: "report",
  data() {
    return {
      selected: "",
      categories: []
    };
  },
  created() {},
  methods: {
    async imageCategories() {
      this.categories = await axios
        .get(`${baseUrl}/feedback/search`)
        .then(res => {
          return res.data;
        });
    }
  },
  async mounted() {
  await this.getCategories(); // removed and tried adding this line again
    console.log("cat ", this.categories);
  }
};

Answer 3

您可以在接收到数据后简单地登录

async getCategories() {
   const res = await axios.get(`${baseUrl}/feedback/search`)
   const data = await res.data
   console.log('cat ',data)
   this.categories = data
}

Vue js：与Vue js异步等待返回观察者

3 个答案: