时间戳

首页 > 解决方案 > 为什么在 Nuxt 中使用 Async with Axios 时不返回任何数据？

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

问题描述

我的列表中没有任何数据。当我使用 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-awaitaxiosnuxt.js

解决方案

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

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

现在它完美无缺！

推荐阅读