We can extract the common attributes of API and implement API management through attribute configuration.

Put the API interface on the server and get it directly from the server. Only one interface is required for the front and rear ends, facilitating maintenance and update.

Interface design

Generally, we need the following interface information:

  • The url address –
  • Method – Request method
  • Params – parameter
  • Type – Parameter type
const schemas={
  projectId: { type: String.required: true },
  url: { type: String.required: true },
  method: { type: String.required: true },
  tags: { type: String.required: true },
  name: { type: String.required: true },
  type: { type: String },
  auth: { type: String },
  input: {},output: {},description: {type:String}};Copy the code

Front-end interface function

const apiList={};

const getApiFn=async() = > {const apis=await getList();
  apis.map(api= >{
    const{name,type,... rest}=api;const funcName=`${name}Fn`;
    const paramsKey=type||(rest.method==='post'?'data':'params');
    apiList[funcName]=data= >fetcher({... rest,[paramsKey]:data}); });return apiList;
};

Copy the code

Use:

import apiList from '@app/utils/getApis';

try{
  const {code,token,message:msg}=await apiList.loginFn(values);
  if(code===200){
    message.success(msg);
    storage.set('token',token);
    props.router.push('/'); }}catch(err){}

Copy the code

Background interface service

Get apis configuration information.

const getConfigs=app= >{
  app.get('/api/list'.(req,res) = >{
    listApi(db,req,res);
  });
  return queryList(db,{current:1.size:1000},'url');
};

Copy the code

Start the interface service.

const start=app= >{
  const getApis= getConfigs(app);
  getApis.then(result= >{
    const apis=classifyArr(result.list,'tags');
    Object.keys(apis).map(tag= >{
      fnList[tag](app,apis[tag]);
    });
  }).catch(error= >{
    console.log(error);
  });
};

Copy the code

Obtaining Interface Information

Add/edit interfaces

Our interface is designed based on the project, so we need to get the interface information based on the project ID.

import fetcher from './fetcher';
import {projectId} from '@app/configs/projects';
const getApis=() = >fetcher({url:'/api/list'.params:{projectId,current:1.size:1000}});

Copy the code

We can set different items for the user and get different interface information. Convenient for us to switch and maintenance.

The interface test

Page to test the interface. You can configure the proxy and token.

const testFn = async values => {
  try{
    const input=strToJson(values.input||'{}');
    const {url,method,type}=state;
    const paramsKey=type||method==='post'?'data':'params';
    const result=await testFetcher({url,method,[paramsKey]:input});
    form.setFieldsValue({
      output:JSON.stringify(result),
    });
  }catch(err){
    form.setFieldsValue({
      output:err, }); }};Copy the code

Use the sample

Front-end Adding Interface

Server interface

const testApi=(db,req,res) = >{
  /* db.find((error,result)=>{ if(error){ return res.status(res.statusCode).send({error}); } return res.status(200).send({result}); }); * /
  return res.status(200).send({
    result: {total:2.list: [{name:'test1'}, {name:'test2'}].current:1.size:10,}}); };module.exports={
  testApi,
};

Copy the code

test

Address of the test