nuxt3接口封装

Nuxt3中接口封装实践与useApi组件

最新推荐文章于 2025-10-13 17:01:53 发布

原创最新推荐文章于 2025-10-13 17:01:53 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

本文介绍了如何在Nuxt3项目中进行接口封装，包括创建api目录、模块划分、接口文件命名规范，并展示了如何在composables中使用useApi。作者还分享了学习过程中的注意事项和期待社区反馈。

一、新建项目

npx nuxi@latest init my-app

二、完善项目目录

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

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

三、接口封装

在 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;

在 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>