如何在 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

如本頁所述，我們不再將@nuxtjs/axios模塊與 Nuxt3 一起使用，而是使用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>

這就是它最后的樣子（在 .network 選項卡中成功請求 HTTP）

---

作為確認，我們可以在模塊頁面上看到 Nuxt3 確實不支持（也不會）支持該模塊。

Suspense錯誤在官方文檔中有詳細說明

<Suspense>是一項實驗性功能。 不能保證達到穩定狀態，API 可能會在此之前發生變化。

它可能看起來很可怕，但您完全可以按照本身使用 API，因為它是警告而不是錯誤，所以完全沒問題！