Question

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

2022-12-04

32929

javascript vue.js axios nuxt.js nuxt3.js

我有此代码从 https://fakestoreapi.com/products/

<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: '/',
    }
})

我的控制台中有以下内容

is an experimental feature and its API will likely change.

我没有在控制台中获取 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> is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.

这看起来很吓人，但你完全可以使用API 本身，因为它是一个警告而不是错误，所以完全没问题！

Answer 2

对于 nuxtjs3，我更喜欢使用可组合项，它在整个应用程序中都很灵活且可以自行导入。

composables/useApi.ts

import axios from 'axios'

export const useApi = () => {
  const baseURL = 'https://BASE_URL.com'
  const storeUser = useStoreUser()

  return axios.create({
    baseURL,
    headers: {
      Authorization: `Bearer ${storeUser.token}`
    }
  })
}

现在我要做的只是

<script lang="ts" setup>
const api = useApi()

const { data } = await api({
    method: 'get',
    url: '/auth/login'
})
</script>