为什么在 Nuxt 中使用 Async with Axios 时不返回任何数据？答案

【问题标题】：Why does it does not return any data when using Async with Axios in Nuxt?为什么在 Nuxt 中使用 Async with Axios 时不返回任何数据？
【发布时间】：2020-10-07 02:15:54
【问题描述】：

我的列表中没有任何数据。当我使用 fetch 时它可以工作（请参阅脚本标签中的注释代码），但当我使用 axios 时则不行。

代码如下：

<template>
  <div>
    <ul>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mountains: [],
    };
  },
  /*async fetch() {
    this.mountains = await fetch(
      "https://api.nuxtjs.dev/mountains"
    ).then((res) => res.json());
  }, */
  async asyncData() {
    const mountains = await axios.get(`https://api.nuxtjs.dev/mountains`);
    return { mountains };
  },
};
</script>

来自https://api.nuxtjs.dev/mountains的JSON

【问题讨论】：

标签： async-await axios nuxt.js

【解决方案1】：

尽量不要破坏响应

async asyncData() {
  const mountains = await axios.get(`https://api.nuxtjs.dev/mountains`);
  return { mountains };
},

【讨论】：

它仍然不起作用...当我打印出 {{ mountain }} 时它只返回一个空数组 []
其实你不需要data()

【解决方案2】：

在 Nuxt Axios 的帮助文档中发现需要添加 $axios 作为参数，并在 axios 和 get 之前添加 $。见以下代码：

  async asyncData({ $axios }) {
    const mountains = await $axios.$get(`https://api.nuxtjs.dev/mountains`);
    return { mountains };
  },

现在完美运行了！

【讨论】：