使用API自動生成工具優化前端工作流

SHERlocked93發表於2019-03-04
API優化前端

在工作中，我們的前端工作流一般開始於前後端協商好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 - 掘金

相關文章