nuxt3接口封装

一、新建项目

npx nuxi@latest init my-app

二、完善项目目录

根据 Nuxt 官方文档，并结合项目实际情况完善项目相关目录

因为该项目仅用于演示在 Nuxt3 中接口的封装，所以在此只添加了与接口封装相关的 2 个文件目录

三、接口封装

1. 在 api 目录下新建 modules、api.ts、index.ts

   

   // modules
   
   * 该目录中存放项目所有接口文件
   * 该目录中的文件层级不限，可按照任意模式划分目录结构，但接口文件名称需统一设为 `*.ts`，且接口文件名称不可重复
   
   例：可按接口类型划分目录结构
     modules
     ├─ get
     │   ├─ a.ts
     │   ├─ b.ts
     ├─ post
     │   ├─ c.ts
     ├─ put
     │   ├─ d.ts
     ├─ delete
     │   ├─ e.ts
   
   例：可按项目模块划分目录结构
     modules
     ├─ access
     │   ├─ login.ts
     │   ├─ logout.ts
     ├─ list.ts
   
   

   // modules/list.ts
   
   import $api from "@/api/api";
   
   export default {
     listGet: (id: number) => {return $api(`/list/${id}`, { method: `get` })},
     listPost: (body: any) => {return $api(`/list`, { method: `post`, body })},
     listPut: (id: number, body: any) => {return $api(`/list/${id}`, { method: `put`, body })},
     listDelete: (body: any) => {return $api(`/list`, { method: `delete`, body })},
   };
   

   // api.ts
   
   const $api = $fetch.create({
     // 请求拦截
     onRequest(req) {
       // 请求拦截相关配置
     },
   
     // 请求错误拦截
     onRequestError(reqErr) {
       // 请求错误拦截相关配置
     },
   
     // 响应拦截
     onResponse(res) {
       // 响应拦截相关配置
     },
   
     // 响应错误拦截
     onResponseError(resErr) {
       // 响应错误拦截相关配置
       console.table(resErr);
     },
   });
   
   export default $api;
   
   

   // index.ts
   // 获取 modules 目录下文件名格式为 `*.ts` 的文件并导出
   
   const modulesFiles: Record<string, any> = import.meta.glob("./modules/**/*.ts", { eager: true });
   
   let modules: Record<string, any> = {};
   
   for (const modulePath in modulesFiles) {
     const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1").split("/").pop();
     modules[moduleName || ''] = modulesFiles[modulePath].default;
   }
   
   export default modules;
   
   

2. 在 composables 目录下新建 useApi.ts

   

   // useApi.ts
   
   import api from "@/api/index";
   
   export const useApi = () => api;
   
   

至此，接口封装完成，可以在页面中使用了，使用示例如下：

// pages/index.ts

<template>
  <div>
    
  </div>
</template>

<script setup lang="ts">
const list = () => {
  const id = 1;
  useApi().list.listGet(id).then(res => {console.log(res)})
}
</script>

<style scoped>

</style>

坑是踩不完的，学如逆水行舟，不进则退。如有不完善或错误的地方请大家指正，大家共同进步！