關于我：明月，從業前端開發，會Java，會前端，會産品，會測試，會大客戶銷售，有過職業規劃經驗，歡迎各位私信聊天。目标是創業實作上班自由。夢想明月天涯。
關于社群：筆者建立了【前端架構師】社群，希望各位架構師們能夠一起加入，維護起前端技術交流區。
文章目錄
目錄
Ant Design Pro 使用系列
文章目錄
前言
什麼是請求接口
老的做法
新做法
openapi 在前端的作用是什麼呢？
如何使用
前言
在之前的進行中，我們的項目 模闆到目前為止已經基本具備了大多數功能，并且較為清晰，從本章開始，我們就要着重于實際開發，來解決夥伴們在日常開發中碰到的坑以及麻煩的事情，最大程度上的提高開發效率與開發規範。本章我們就來說一下前後端分離後，前端如何定義請求開發接口。
什麼是請求接口
在項目中，前後端互動，我們被稱為前端調用後端的請求接口，我們需要先看背景有哪些接口，事先維護進我們的項目中，并且我們需要清楚的告知具體的API它是用來做什麼的，有什麼功能，尤其是我們現在使用的是 Typescript，我們則需要知道具體的字段資訊來聲明我們頁面的interface 接口。
老的做法
在ts不流行的時候我們一貫的做法可能是，前後端定義一個接口名，參數，請求類型，然後前端将這個接口維護進自己的項目，如果說這個項目大一點需要幾百個上千個接口，那麼們在前端項目中就需要維護這麼上百上千個接口，并且需要著名每個接口的請求方式，參數，接口名等等。
如上就是之前在某個老項目中，前端定義的接口請求。 （Ps: 此處隻供參考，沒有截圖具體類型。代碼補全哦~）
前端需要根據背景給出的Swagger 來将一個個的接口手動輸入到項目中，然後在去對應頁面去調用使用。
新做法
在新的做法中，前端接入了Typescript強類型，是以我們在之前老的接口上還需要給接口加上類型，參數類型已經傳回類型等，是以對前端來說，又是一個很高的維護成本。
并且還需要維護大量的接口檔案。
做為一個優秀的前端工程師來說，我們應該着重于提高開發效率，将精力應該着重放在業務之上，是以對這類重複的事情，我們應該想辦法的快速搞起來，不應該占據我們的大量時間。那麼這個我們怎麼辦呢？
答案就是：openApi。
為什麼有openapi
openapi 即開放 API，也稱開放平台。 所謂的開放 API（OpenAPI）是服務型網站常見的一種應用，網站的服務商将自己的網站服務封裝成一系列 API（Application Programming Interface，應用程式設計接口）開放出去，供第三方開發者使用，這種行為就叫做開放網站的 API，所開放的 API 就被稱作 OpenAPI（開放 API ）。
如它的名字一樣，打開api，也就是說它對我們前端來說，就是一個列出所有api的一個網站，如果你對接的背景是java，c#等，那我們最常見的就是。swagger。
後端接入完成 swagger 之後，我們可以通路 swagger 生成的文檔。
它清楚的列出了我們所需要的接口請求位址，接口請求類型，接口名，并且針對不同的實作類也劃分好了接口的标題。并且我們還可以線上直接輸入參數用來進行接口請求，檢視請求後傳回的資料。
并且通路頁面我們可以拿到一個 openapi 的規範檔案。（出于安全，我隐藏了自己的位址）
openapi 在前端的作用是什麼呢？
openapi在前端，其實是umi 封裝的一個小功能，它的作用是将你 swagger的 openapi 規範檔案導入到項目中，并且在項目中實作 接口自動引入，類型自動生成等。
也就是說，你把openapi的規範檔案位址複制到 我們項目的 openapi 中，我們就可以一鍵将你背景中所有的接口引入進來，并且自動建立對應類型，并且自動聲明類型。
也就是說，它是一個提升你開發效率的。神器！我們杜絕了重複性的将接口引入到我們的項目中。
如下圖，都是自動生成并引入的。
心動了嗎？
我們來一起看看如何看看 在我們的pro項目中如何使用 openapi
如何使用
- 後端接入完成 swagger 之後，我們可以通路 swagger 生成的文檔，一般來說都是
http://localhost:8080/swagger-ui.html
- 其次我們需要在我們項目中的 config 檔案中修改config.ts 配置。，以 pro 的 openapi 為例，我們配置一下
openAPI: {
requestLibPath: "import { request } from 'umi'",
// 這裡使用 copy 的 url
schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json",
mock: false,
}
// requestLibPath
這裡我們需要保證引入request，我們可以是自己封裝的 request，也可以是 umi 自己的request。但是這裡必須要保證，引入request，否則，我們在項目中的請求将可能無法執行。
// mock
這裡指的是 如果配置為 true 則會自動生成一些mock檔案，雖然品質不如我們寫的，但是在開發中沒啥問題，生成的 mock 檔案在項目根路徑下的 mock 檔案中,生成的 mock 資料每次都不同，如果要調試可以随意修改，隻有執行 npm run openapi 才會進行修改。
// schemaPath
這裡指的是 我們的openapi 規則檔案的位址，一般我們取上述 swagger 中的openapi位址。也可以取本地某個 openapi規範化檔案。
當我們這些都配置完成之後。
我們就可以執行項目自帶的執行openapi的指令。
npm openapi
然後系統會自動的幫我們在項目目錄生成對應的 請求檔案。
并且也會自動的幫我們聲明這些請求接口的 定義類型。
同時，swagger中的注釋也會給我們引入進來。
在 pro項目中，這個接口會預設生成在 src/service/ .. 之下。
如果說，你的swagger 有很多個不同的分類如：
這時候為了區分不同的業務。
是以你在配置config的時候一定要注意傳遞一個參數叫： projectName 用來區分不同的接口
然後你的項目中，就會是我這種樣子，自動區分了對應的檔案夾
這下如果你想用的話，就直接在頁面使用即可。
并且也為你定義好了聲明檔案。