基于UmiJS的自动化Fetch请求生成插件在2021年的今天，在大部分项目中已经抛弃了原先荒漠式的接口写法，很多项目

🔰 简介

在2021年的今天，在大部分项目中已经抛弃了原先荒漠式的接口写法，很多项目都有意识的拆分成了很多个单独的function函数进行维护，每次写接口的时候不是在页面上套路一堆的$axios...等等与视图逻辑的代码。而是有意义的写成Promise<R>返回值的函数，通过export往外导出。

诚然，目前的解决方案已经足够满足于我们当下的需求，虽然维护一份export function看起来很头疼。但是，为了以后，我忍了。只能不断的CV然后修改参数。那么，有没有更好的方式呢？

在之前的文章中，我分享了约定式接口，意思是将接口函数通过配置生成。那么我们在实际开发中就只需要编写配置就可以生产出一个axios，fetch的函数概念。

/* 配置 */
export default {
    getUserInfo: 'POST /mall-app/v1/user'
}

/* 生成 */
const getUserInfo = (data) => {
    request(//...todo)
}

今天就给大家分享下，聊聊在团队项目中是如何做接口函数自动生成的吧。

✅ 编译时 ❎ 运行时

在之前的文章，提到的约定式接口是基于运行时产生的，有很多的缺点问题。具体可以去看我上一篇文章，在这里先开个传送门：点击阅读

直观的缺点

函数代码不可读
函数代码不可推导
逻辑执行是在项目运行去做的，需要开销。
函数代码错误无法检测
...

当上述问题抛出的时候，对于使用TypeScript组织代码的项目简直是一种灾难，类型推导完全看运行时标注。 TransForm函数通过Record<string, (data: Record<string, any>) => Promise<any>>的方式实现，虽然也可以实现基本的类型推导，但是对于代码维护者来说，是及其不友好的。

# 上述类型推导默认为any

在纠结一段时间后，毅然决然的使用微内核脚手架@umijs的插件行为来做配置依赖管理。那么可以使用插件自带的能力见简便在编译时获得当前配置文件映射出来的函数文件。

那么，我们一起看看，映射插件是怎么练成的吧。

💦明确插件功能

插件的功能核心就是自动映射接口函数，可供开发者在开发时调用，且获取来自于外部的数据。

那么我们根据运行时的开发思路相对来说实现起来逻辑是没有问题的。

👍如何使用？

install

# yarn
yarn add plugin-transform-api -D

# npm
npm install plugin-transform-api -D --save

创建接口配置文件路径

确保当前的文件正确的存在于目录当中。

.umi
│  ├─.cache
│  │  └─babel-loader
│  ├─core
│  ├─plugin-helmet
│  ├─plugin-initial-state
│  │  └─models
│  ├─plugin-interface
│  ├─plugin-model
│  └─plugin-request
├─pages
└─services

创建一个接口

module.exports = {
    fetchUserLogin: 'POST /service-app/v1/user/login'
}

引入插件

在Umijs的配置文件中引入插件，并且进行配置。

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
  plugins: ['plugin-transform-api'],
  interface: {
    // 指定api接口配置路径
    path: 'services',

    // 指定request接口请求配置
    requestPath: '@/utils/fetch'
  }
});

发送一个请求

对umi进行一个接口引用。如下图，可以得到我们通过fetchUserLogin: 'POST /service-app/v1/user/login'生成后的一个请求函数。

🐱‍🐉资源

plugin-transform-api

😒结语

目前来说，当前插件属于一个测试版本，但是不妨碍我们继续进行一个完善。如果有好的建议欢迎加入我的小窝进行技术上的交流。

一个多月都没有写文章了，突然发现被业务牵扯了部分精力，慢慢的会恢复内容的创作。

当前内置请求模板：umi-request。基于axios的请求方式正在来的路上。目前来说，我个人比较推荐在支持ES6，而不需要进行ES5的适配项目中使用fetch来代替xhr。

如果你们后端爸爸好说话的话，完全可以直接下载一份接口文档当中的JSON文件复制到项目当中。QAQ

也是优先于我个人手头上的业务吧。

欠债文章数： 16 - 1

有兴趣的朋友可以拉个群进行一些技术上的探讨。无广告

88_785_bb9cce378efe1450897ff5734a3eb0a3_a423626931a68df99e84dc9ef79ca26d.png

​基于UmiJS的自动化Fetch请求生成插件