当前位置：首页 > news >正文

nuxt3模块化API架构

news 2026/5/12 11:42:52

nuxt3模块化API架构

composables/useApi.js(核心 composable)↓ 统一底层 api/modules/ ├── projects.js → 基于 useApi()实现 ├── categories.js → 基于 useApi()实现 ├── types.js → 类型定义 └── api.js → 统一导出入口 ↓ Vue 组件调用 pages/*.vue →import{getProjects}from'~/api/projects'

优势

✅符合 Nuxt3 最佳实践- 使用 composable 模式

✅模块化组织- 按业务模块分离

✅向后兼容- Vue 组件调用方式无需修改

✅代码精简- 删除了冗余的未使用模块

✅统一底层- 所有 API 调用都基于useApi()

Vue 组件中的调用方式：

import{getProjects}from'~/api/projects'constresponse=awaitgetProjects(params)

附上composables/useApi.js

// composables/useApi.js// 使用 Composable 模式封装 API 请求，符合 Nuxt3 最佳实践import{ofetch}from'ofetch'/** * API Composable Hook * @returns {Object} API 请求方法和工具函数 */exportconstuseApi=()=>{constconfig=useRuntimeConfig()constAPI_BASE_URL=config.public.expressApiUrl||'http://localhost:3001'// 从 localStorage 获取 tokenconstgetToken=()=>{if(import.meta.client){returnlocalStorage.getItem('token')}returnnull}// 创建请求选项constcreateRequestOptions=(customOptions={})=>{consttoken=getToken()constoptions={baseURL:API_BASE_URL,timeout:10000,headers:{'Content-Type':'application/json',...(token&&{Authorization:`Bearer${token}`})},onRequestError:(error)=>{console.error('❌ Request Error:',error)throwerror},onResponseError:({response,error})=>{console.error('❌ Response Error:',error)// 统一错误处理if(response){const{status}=responseconstdata=response._data||{}switch(status){case401:// 未授权，清除 tokenif(import.meta.client){localStorage.removeItem('token')}breakcase403:console.error('没有权限访问')breakcase404:console.error('请求的资源不存在')breakcase500:console.error('服务器内部错误')break}error.message=data?.message||error.message}else{error.message='网络连接失败，请检查网络设置'}throwerror}}return{...options,...customOptions}}// 通用 API 请求函数constrequest=async(config)=>{const{method,url,params,data,...otherOptions}=configconstoptions=createRequestOptions(otherOptions)// 构建完整 URLletfullUrl=urlif(params){constsearchParams=newURLSearchParams(params)constqueryString=searchParams.toString()constseparator=fullUrl.includes('?')?'&':'?'fullUrl=`${url}${separator}${queryString}`}// 添加请求体if(data&&['post','put','patch'].includes(method?.toLowerCase())){options.body=data}// 开发环境日志if(import.meta.client&&window.location.hostname==='localhost'){console.log(`🚀 API Request:${method?.toUpperCase()}${url}`,{params,data,})}try{constresponse=awaitofetch(fullUrl,{...options,method:method?.toLowerCase()})// 开发环境日志if(import.meta.client&&window.location.hostname==='localhost'){console.log(`✅ API Response:${method?.toUpperCase()}${url}`,response)}returnresponse}catch(error){console.error('API 请求错误:',error)throwerror}}// HTTP 方法封装constget=(endpoint,params)=>request({method:'GET',url:endpoint,params})constpost=(endpoint,data)=>request({method:'POST',url:endpoint,data})constput=(endpoint,data)=>request({method:'PUT',url:endpoint,data})constdel=(endpoint)=>request({method:'DELETE',url:endpoint})constpatch=(endpoint,data)=>request({method:'PATCH',url:endpoint,data})// Token 管理consttokenManager={get:getToken,set:(token)=>{if(import.meta.client){localStorage.setItem('token',token)}},remove:()=>{if(import.meta.client){localStorage.removeItem('token')}}}// 导出 ofetch 实例以供特殊情况使用constapiFetch=ofetchreturn{get,post,put,del,patch,tokenManager,request,apiFetch,getBaseUrl:()=>API_BASE_URL}}