Nuxt+Vue3+TS+Vite入门教程

<think>好的，我需要回答用户关于在Nuxt3和Vue3中如何封装fetch并实现响应拦截的问题。首先，我需要回顾Nuxt3和Vue3中网络请求的不同之处。根据用户提供的引用，Nuxt3推荐使用内置的fetch而不是axios，而Vue3通常使用axios。用户想了解如何在这两个框架中封装请求并添加响应拦截。 首先，我应该先处理Nuxt3的部分。Nuxt3的封装可能涉及使用内置的useFetch或者$fetch，同时利用Nuxt3的插件系统来添加拦截器。引用[2]提到在nuxt.config.ts中配置模块，可能涉及到Pinia的状态管理，但用户的问题主要围绕请求封装，所以可能需要创建插件来拦截请求和响应。需要确认Nuxt3的插件如何编写，以及如何全局注册。 然后是Vue3的部分，用户可能更熟悉axios，所以需要展示如何封装axios实例，添加请求和响应拦截器。这部分相对标准，但需要确保示例代码正确，比如使用axios.create，以及正确设置拦截器。 另外，用户提供的引用[1]提到Nuxt3内置的fetch相关方法，可能需要详细说明在Nuxt3中使用$fetch，并如何通过插件或可组合函数进行封装。例如，可以覆盖全局的$fetch方法，或者在可组合函数中封装拦截逻辑。 需要注意区分Nuxt3和Vue3的不同实现方式，同时确保代码示例正确，比如语法、导入方式等。此外，响应拦截可能需要处理错误状态码，统一处理错误信息，或者处理授权失败跳转登录页等情况。 可能还需要考虑如何统一处理错误，例如在拦截器中捕获401状态码并重定向到登录页面，同时使用ElMessage提示错误信息。此外，在Nuxt3中可能需要使用运行时配置来设置baseURL，或者在请求时动态获取配置。 总结步骤： 1. Nuxt3中使用插件或可组合函数封装$fetch，添加请求和响应拦截。 2. Vue3中使用axios.create创建实例，添加拦截器。 3. 提供代码示例，确保语法正确，并符合各自框架的最佳实践。 4. 对比两种框架的实现方式，帮助用户理解差异。 5. 确保引用正确，比如引用中提到的模块配置和文档链接。 需要验证Nuxt3的插件写法是否正确，例如在plugins目录下创建http.ts文件，使用defineNuxtPlugin来定义插件，并在其中修改全局的$fetch行为。同时，处理请求拦截时添加headers，响应拦截处理错误。对于Vue3，使用axios的拦截器，并导出实例供组件使用。 可能还需要提到在Nuxt3中如何结合Pinia进行状态管理，例如在拦截器中检查token是否存在，但这可能超出当前问题范围，但如果有相关引用的话可以提及。不过用户的问题主要集中在封装和拦截，所以保持重点在这里。 最后，生成相关问题，可能涉及性能优化、错误处理、状态码处理等，确保问题与主题相关，帮助用户深入理解。</think>在Nuxt3和Vue3中实现`fetch`封装及响应拦截，需要区分框架特性。以下是分步实现方法： --- ### 一、Nuxt3中封装$fetch并实现拦截 #### 1. 创建插件统一拦截 在`plugins`目录下新建`http.ts`文件，通过覆盖全局`$fetch`实现拦截： ```typescript // plugins/http.ts export default defineNuxtPlugin(() => { const globalFetch = $fetch.create({ baseURL: useRuntimeConfig().public.apiBase, onRequest({ options }) { // 请求拦截：添加token const token = localStorage.getItem(&#39;token&#39;); options.headers = { ...options.headers, Authorization: `Bearer ${token}` }; }, onResponseError({ response }) { // 响应拦截：处理401错误 if (response.status === 401) { ElMessage.error(&#39;登录过期&#39;); navigateTo(&#39;/login&#39;); } return Promise.reject(response._data); } }); return { provide: { fetch: globalFetch } }; }); ``` #### 2. 使用封装后的请求 ```typescript // 组件中调用 const { data } = await useFetch(&#39;/user/info&#39;, { method: &#39;GET&#39; }); ``` --- ### 二、Vue3中封装axios并实现拦截 #### 1. 创建axios实例 ```typescript // src/utils/http.ts import axios from &#39;axios&#39;; const service = axios.create({ baseURL: import.meta.env.VITE_API_URL }); // 请求拦截 service.interceptors.request.use(config => { const token = localStorage.getItem(&#39;token&#39;); if (token) config.headers.Authorization = `Bearer ${token}`; return config; }); // 响应拦截 service.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { ElMessage.error(&#39;身份验证失败&#39;); router.push(&#39;/login&#39;); } return Promise.reject(error); } ); export default service; ``` #### 2. 在组件中使用 ```typescript import http from &#39;@/utils/http&#39;; http.get(&#39;/user/info&#39;).then(res => { console.log(res.data); }); ``` --- ### 关键差异对比 | 特性 | Nuxt3 | Vue3 | |--------------------|--------------------------------|----------------------| | 核心方法 | `useFetch`/`$fetch` | `axios` | | 错误处理 | 通过`onResponseError`钩子 | 拦截器`interceptors` | | 全局配置 | `useRuntimeConfig()`[^1] | 环境变量 | | 状态管理集成 | 支持Pinia插件[^2] | 需手动关联 | ---