如何在 Nuxt3 中使用 @nuxtjs/axios 模块？

Question

我有这段代码可以从https://fakestoreapi.com/products/获取 API 数据

<template>
<div>


</div>
</template>


  <script>  
  definePageMeta({
    layout: "products"
  })

export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('https://fakestoreapi.com/products/')
    console.log(res.data)
  },
}
</script>

我已经安装了 axios 并且nuxt.config.ts有：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({

    app: {
        head: {
            title: 'Nuxt',
            meta: [
                { name: 'description', content: 'Everything about - Nuxt-3'}
            ],
            link: [
                {rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
            ]
        }
    },
    runtimeConfig: {
        currencyKey: process.env.CURRENCY_API_KEY
    },
    modules: [
        "@nuxtjs/tailwindcss",
    ],
    buildModules: [
        "@nuxtjs/axios"
    ],
    axios: {
      baseURL: '/',
    }
})

我的控制台中有以下内容

是一个实验性功能，其 API 可能会发生变化。

我没有在控制台中获取 API 数据。

Answer 1

正如本页所述，我们不再在 Nuxt3 中使用该@nuxtjs/axios模块，而是ohmyfetch直接将其嵌入到框架的核心中，$axios如此处所写。

因此，您的配置文件应该如下所示

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt Dojo',
      meta: [
        { name: 'description', content: 'Everything about - Nuxt-3' }
      ],
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
      ]
    }
  },
  runtimeConfig: {
    currencyKey: process.env.CURRENCY_API_KEY
  },
  modules: [
    "@nuxtjs/tailwindcss"
  ],
})

给定的/pages/products/index.vue可以是这样的

<template>
  <div>
    <p v-for="user in users" :key="user.id">ID: {{ user.id }}  {{ user.name }}</p>
  </div>
</template>


<script>
definePageMeta({
  layout: "products"
})

export default {
  data () {
    return {
      users: '',
    }
  },
  async mounted() {
    this.users = await $fetch('https://jsonplaceholder.typicode.com/users')
  },
}
</script>

这就是最后的样子（网络选项卡中显示成功的 HTTP 请求）

作为确认，我们可以在模块页面上看到 Nuxt3 确实不支持（也不会支持）该模块。

错误在官方文档Suspense中有详细说明

<Suspense>是一个实验性功能。不保证达到稳定状态，API 可能会在此之前发生变化。

这可能看起来很可怕，但您完全可以使用 API 本身，并且由于这是警告而不是错误，所以完全没问题！