分享互联网前沿技术
Subscribe
前端

Axios在Nuxt框架中做为组合API的应用

在 Vue.js 应用程序中使用 Axios 时的一个常见模式是创建一个带有拦截器的自定义 axios 实例，以便全局处理事情（例如身份验证和错误报告）

Axios在Nuxt框架中做为组合API的应用

在 Vue.js 应用程序中使用 Axios 时的一个常见模式是创建一个带有拦截器的自定义 axios 实例，以便全局处理事情（例如身份验证和错误报告）。 然后我们在 API 函数中使用该实例，这些函数根据业务上下文分组在文件或文件夹中。 最后，我们在组件中导入 API 函数以获取数据。

让我们看看在使用组合 api 时如何在 Nuxt 中实现相同的模式。

安装 Nuxt 组合 API

由于我们将使用 Vue.js 组合 API，我们将安装 Nuxt 插件，该插件将允许我们使用具有 Nuxt 特定功能的 Vue 3 组合 API。

npm install @nuxtjs/composition-api

让我们将其添加到 nuxt.config 中.js buildModules 数组中。

nuxt.config.js

{
  ...
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'https://reqres.in/api/',
  }
  ...
}

创建和自定义 Axios 实例

为了通过注册拦截器和更改全局配置来自定义Axios，我们必须创建并注册一个Nuxt插件。我们将实例作为 api 注入到上下文中，以便以后可以在函数中使用它，$api使用 useContext 可组合。

plugins/api.js

export default function ({ $axios, app }, inject) {
  const api = $axios.create()

  api.onRequest((config) => {
    console.log(`Making request to ${config.url}`)
  })

  api.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    const errorText = code
      ? `A request failed with status code ${code}`
      : `A network error occurred`

    console.error(errorText)
  })

  api.onResponse((res) => {
    return res.data
  })

  inject('api', api)
}

我们可以使用 onRequest、onResponse 和 onError 帮助程序分别拦截请求/响应和处理错误。在我们的示例中，我们只使用 onResponse 帮助程序从响应返回数据，而不是整个响应对象。

我们现在准备好创建我们的 API 函数并在 Vue.js 组件中使用它们

API函数

我们在示例中使用 reqres API 来设置两种获取用户的方法。

请注意我们如何将我们的模块实现为可组合的，以便它导出一个函数，该函数使用我们的数据获取方法返回一个对象。 我们需要这样做，因为 useContext 只在 Vue 组件的 setup 方法中起作用。

api/user.js

import { useContext } from '@nuxtjs/composition-api'

export const userApi = () => {
  const { $api } = useContext()

  const fetchUser = async (userId) => {
    const res = await $api.get(`users/${userId}`)

    return res
  }

  const fetchUsers = async () => {
    const res = await $api.get('users')

    return res
  }

  return {
    fetchUser,
    fetchUsers,
  }
}

在我们的组件中使用 API 函数

我们可以直接调用我们的API函数，或者使用useFetch或使用Async，这取决于我们想要实现的目标。

<template>
  <div>
    <div>
      <button type="button" class="btn btn-primary" @click="loadUsers">
        Fetch users
      </button>
    </div>
    <div>
      <pre>{{ users }}</pre>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from '@nuxtjs/composition-api'
import { userApi } from '@/api/user'

export default defineComponent({
  setup() {
    const { fetchUsers } = userApi()
    const users = ref([])

    const loadUsers = async () => {
      const res = await fetchUsers()
      users.value = res.data
    }

    return {
      users,
      loadUsers,
    }
  },
})
</script>

就是这样，使用这种技术，我们可以将API调用分组到函数中，就像我们在普通的Vue.js应用程序中所做的那样。

Read next