Axios在Nuxt框架中做为组合API的应用
在 Vue.js 应用程序中使用 Axios 时的一个常见模式是创建一个带有拦截器的自定义 axios 实例,以便全局处理事情(例如身份验证和错误报告)
在 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 数组中。
{
...
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应用程序中所做的那样。