🔰 profile

In 2021, the original desert interface writing method has been abandoned in most projects, and many projects have consciously split into a number of separate functions for maintenance, instead of a pile of $axios on the page every time they write interfaces… And so on with view logic code. It’s a meaningful function written as the return value of a Promise

, exported by export.

Admittedly, the current solution is enough to meet our current needs, although it seems troublesome to maintain an export function. But, for the future, I put up with it. You just keep CV and modify the parameters. So, is there a better way?

In a previous article, I shared the contracted interface, meaning that interface functions are generated through configuration. In real development, we can produce a function concept of AXIos, FETCH, just by writing the configuration.

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

/ * * /
const getUserInfo = (data) = > {
    request(/ /... todo)
}
Copy the code

Today, I will share with you how to do automatic generation of interface functions in team projects.

✅ compile time ❎ run time

In the previous article, the contract interface mentioned is runtime based and has many disadvantages. For details, go to my last post and open a portal here: click read

Disadvantages of intuition

  • The function code is unreadable
  • Function code is not derivable
  • Logical execution is done at project runtime and requires overhead.
  • Function code error cannot be detected
  • .

When the above problem is thrown, it’s a disaster for projects that use TypeScript to organize code, and type derivation is entirely up to the run-time annotations. The TransForm function is implemented in the form of Record

) => Promise

>, which does basic type derivation, but is extremely unfriendly to code maintainers.

,>

The above type derivation defaults to any

After fidgeting for a while, I decided to use the plugin behavior of the microkernel scaffolding @umijs to do configuration dependency management. Then you can use the plugin’s built-in ability to get a function file mapped from the current configuration file at compile time.

So, let’s take a look at how the mapping plug-in is developed.

💦 Specify plug-in functions

The core function of the plug-in is the automatic mapping interface function, which can be called by the developer during development and obtain data from the external.

So we have relatively no problem implementing the logic according to the runtime development thinking.

How do I use 👍?

install

# yarn
yarn add plugin-transform-api -D

# npm
npm install plugin-transform-api -D --save
Copy the code

Create an interface profile path

Ensure that the current file exists in the directory correctly.

. Umi │ ├ ─. Cache │ │ └ ─ Babel - loader │ ├ ─ core │ ├ ─ the plugin - helmet │ ├ ─ plugin - initial state │ │ └ ─ models │ ├ ─ the plugin interface. - │ ├─ ├─ ├─pages ├─ exercisesCopy the code

Creating an interface

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

The introduction of the plugin

Introduce the plug-in in the configuration file of Umijs and configure it.

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',},routes: [{path: '/'.component: '@/pages/index'},].fastRefresh: {},
  plugins: ['plugin-transform-api'].interface: {
    // Specify the API configuration path
    path: 'services'.// Specify the request interface request configuration
    requestPath: '@/utils/fetch'}});Copy the code

Send a request

Make an interface reference to UMI. FetchUserLogin: ‘POST /service-app/v1/user/login’

🐱 🐉 resources

  • plugin-transform-api

😒 epilogue

For now, the current plug-in is a beta version, but that doesn’t prevent us from continuing to make improvements. If you have good suggestions, welcome to join me for technical communication.

I haven’t written an article for more than a month, but I suddenly found that part of my energy was involved in business, and I will slowly resume content creation.

Umi-request is a built-in request template. Axios-based requests are on the way. For now, I personally recommend using FETCH instead of XHR for adaptation projects that support ES6 and don’t require ES5.

If your backend dad is nice, you can download a copy of the interface documentation directlyJSONFiles are copied to the project. QAQ

I think it takes precedence over my own business.

Number of articles in debt: 16-1

Interested friends can join a group for some technical discussion. No advertising