运用API自动天生东西优化前端工作流

2019年8月20日 254次阅读 来源: SHERlocked93

在事情中，我们的前端事情流平常开始于前后端协商好Api文档以后，再针对这个Api文档做mock模仿数据，然后用做好的mock举行开辟，后端开辟终了以后再改一下API数据的BaseURL切换到正式API举行联调；以下

《运用API自动天生东西优化前端工作流》

本文引见的一个东西(或许说要领)，来将这个事情流优化一下，也是我日常平凡事情正在用的要领，当作本身的笔记，也跟人人一同分享一下~

这个要领的重要思绪就是开辟人员在某个api东西中按请求填好文档，然后导出swagger.json设置文件，再把这个设置文件导入到easy-mock中，再用东西自动天生前端api的js文件以供挪用。

本文中所运用的东西：sosoApi、Easy-mock、Swagger、Easy-mock-api-template、axios

1. 运用Api治理平台导出swagger.json文件

平常我们前后端经由过程种种平台或许东西来治理Api，比方免费的可视化Api治理平台 sosoApi、Yapi等，平常来说这些东西都能够天生swagger.json的Api，我们能够用它来直接天生一个美丽的可视化Api文档，也能够用它来作为设置文件导入其他东西中，比方Easy-mock；

比方在sosoApi中就能够导出为swagger文档(swagger.json)：

《运用API自动天生东西优化前端工作流》

我们先导出一个swagger.json备用；

2. 运用swagger.json导入easy-mock

Mock平台我们能够运用Easy-mock，轻量又简约，虽然没有Api的分组功用，但日常平凡敷衍敷衍不太大的运用、个人运用等场景足够了；Easy-mock官网的效劳被不少人直接拿到开辟环境用，经常被挤爆，这个状况能够用当地布置来处理这个题目，参考 windows当地装置布置 Easy Mock 。

我们将Api治理平台中导出的swagger.json文件在新建project的时刻导入：

《运用API自动天生东西优化前端工作流》

如许方才Api平台中设置的Api就被同步到我们的Easy-mock设置中了，比方sosoApi的示例项目导出的效果就是：

《运用API自动天生东西优化前端工作流》

这时候我们就能够用它来举行数据mock了，怎样，是否是很轻松~

easy-mock项目面板上面会有个 Project ID，这个记下来背面要用；

3. 运用easy-mock-cli天生js花样Api

有了easy-mock以后平常状况下我们要写前端的api文件了，平常api东西用axios，这里供应一个封装：

// utils/fetch.js
import axios from 'axios'
 
const service = axios.create({
  baseURL: 'https://easy-mock.com/project/5bf6a23c92b5d9334494e884',
  timeout: 5000
})
 
// request拦截器
service.interceptors.request.use( config => {...},  err => {...})
 
// respone拦截器
service.interceptors.response.use( res => {...},  err => {...})
 
export default service

我们能够用easy-mock-cli来天生api，模板文件假如不想用本来的模板的话，能够运用我fork以后改写的一个模板easy-mock-api-template，天生的Api文件是如许的：

// api/index.js
import fetch from 'utils/fetch';
 
/* 运动查询 */
const activityQuery = ({ activityDate }) => fetch({
  method: 'get',
  url: '/activity/query',
  params: { activityDate }
});
 
/** 运动保留 */
const activitySave = () => fetch({
  method: 'post',
  url: '/activity/save'
});
 
/** 运动提交 */
const activitySubmit = ({ activityId, content }) => fetch({
  method: 'post',
  url: '/activity/submit',
  data: { activityId, content }
});
 
export {
  activityQuery,   // 运动查询
  activitySave,    // 运动保留
  activitySubmit   // 运动提交
};

然后在文件中就能够：

import * as Api from 'api/index.js';
 
// 挪用
Api.activitySubmit({ activityId: 2 })
    .then(...)

简朴引见一下设置文件，更庞杂的设置要参考本来的文档；

// .easy-mock.js 设置文件
 
{
  host: 'http://localhost:8080/',        // easy-mock的源，没有当地布置的话不必写，当地布置则填当地效劳地点
  output: "../",                       // 天生 API 的基本目次
  template: "../",                       // 指定模板，这里用当地写的模板
  projects: [                           // 能够有多个模板泉源
    {
      "id": "你要建立的 Easy Mock 项目的 id",    // 方才记下来的 Project ID
      "name": "api"                         // 天生的output目次下的文件名
    }
  ]
}

然后

npm run create-api

就能够在根目次下天生一个api/index.js文件了~

网上的帖子大多深浅不一，以至有些前后矛盾，鄙人的文章都是进修过程当中的总结，假如发明毛病，迎接留言指出~

参考：

  1. 用swagger.json自动天生axios api接见代码 – 简书
  2. Easy-mock-cli/README.md

推介浏览：

  1. windows当地装置布置 Easy Mock – 掘金

PS：迎接人人关注我的民众号【前端下午茶】，一同加油吧~

《运用API自动天生东西优化前端工作流》

别的能够到场「前端下午茶交换群」微信群，长按辨认下面二维码即可加我挚友，备注加群，我拉你入群～

《运用API自动天生东西优化前端工作流》

    原文作者：SHERlocked93
    原文地址: https://segmentfault.com/a/1190000017108180
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞