nuxt3封装请求

### Nuxt3 中封装 HTTP 请求的实现方式 在 Nuxt3 中，官方推荐使用 `useFetch` 和 `$fetch` 来替代传统的 Axios 库进行网络请求。这些工具提供了更加简洁和高效的 API 设计模式，同时也支持自定义封装以满足项目的特定需求。 以下是基于 Nuxt3 的 HTTP 请求封装教程： #### 1. 使用 Composition API 自定义 Hook 可以通过创建一个组合函数来封装所有的网络请求逻辑。这种做法不仅提高了代码复用性，还使得全局范围内的请求操作变得更加一致。 ```javascript // utils/useRequest.js export function useRequest(url, options = {}) { const { method = 'GET', body = null, ...rest } = options; return useFetch(url, { method, body, ...rest, }); } ``` 上述代码片段展示了如何利用 `useFetch` 创建一个新的钩子函数 `useRequest`[^2]。此函数接受 URL 和选项参数作为输入，并返回经过封装后的响应对象。 #### 2. 配置默认基础路径与头部信息 为了减少重复工作量并增强安全性，可以预先设定一些通用属性比如 BaseURL 或者 Authorization Token 等等。 编辑 `nuxt.config.ts` 文件如下所示: ```typescript // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { public: { apiBase: process.env.API_BASE || '/api', }, }, }); ``` 接着修改我们之前定义好的 hook 函数使其能够读取到环境变量中的 base url 值. ```javascript import { useRuntimeConfig } from '#app'; export function useRequest(url, options = {}) { const config = useRuntimeConfig(); const fullUrl = `${config.public.apiBase}${url}`; const headers = { ...(options.headers ?? {}), 'Content-Type': 'application/json' }; return useFetch(fullUrl, { ...options, headers, }); } ``` 这里引入了 `useRuntimeConfig()` 方法获取运行时配置项，从而动态拼接完整的接口地址[^4]. #### 3. 添加错误处理机制 当遇到服务器端异常或者超时时，应该给予用户友好的提示而不是让程序崩溃掉。因此我们需要扩展我们的 request 工具加入 try-catch 结构以及相应的 fallback 行动方案。 更新后的版本可能看起来像这样: ```javascript export async function safeUseRequest(url, options = {}) { let result; try { result = await useRequest(url, options)(); } catch (error) { console.error('An error occurred during the request:', error); throw new Error(`Failed to load data from ${url}`); } return result; } ``` 以上就是关于怎样在 Nuxt3 上面构建起一套完善的 HTTP 请求解决方案的一个简单指南[^1]. ---