[TOC] ## 前言 本文主要摘錄接口開發以及使用中常見的問題以及解決思路。 ## 問題列表 ### 大量并行or串行接口如何優化 **場景**：在一個頁面中涉及很多控件需要單獨接口去做數據獲取，尤其pc頁面情況尤其嚴重。也有的場景是需要前端順序的調用連續的幾個接口，在前端異步編程思想不是特別好的情況下，代碼可讀性也很差。 **解決方案**： - 盡量接口設計成可以并行請求，除非強先后邏輯 - 接口具有串行邏輯的，讓接口服務方優化為一個接口，針對不同請求階段，給不同的區分字段區分，報錯在第幾階段以及錯誤信息 - 從技術和業務兩個角度做接口優化分組，實際劃分后技術分類的接口分組比較少，基于業務做得接口分組會很多。 - 接口優化依賴于接口提供方，如果原先是后端負責就后端負責，如果原先是前端node負責，就node負責。 - 靈活的對有必要需求的頁面進行接口請求的方案整理，力求性價比最高的技術實踐 - 可以在成本允許的情況下，接入BFF架構，也就是將接口微服務基礎上增加專職為大前端提供易用接口的前端接口服務 - 內部服務調用dns緩存 ### 界面交互中取消當前請求 **場景**：在一個頁面中涉及很多數據是需要請求接口的，但當點擊某個按鈕或者滑動時，為了節省網絡性能，可能其原來進行的接口請求需要取消或者中止。比如下面的這種頁面：在切換tab頁面的時候，其實未加載好的數據在切換tab之時可以取消掉請求。或者你在進行某個耗時操作，在沒有操作成功之前，你可以取消操作并撤銷請求等類似場景。  **解決方案**： axios為我們提供了一個 CancelToken的函數，這是一個構造函數，該函數的作用就是用來取消接口請求。 > 注意事項：一定要使用構造函數每次新產生token，不要直接使用一個固定的token，如果是直接配置axios.CancelToken.source().token,那么取消一次之后請求都無法發出了 ``` // vue為例 methods:{ getMsg () { let CancelToken = axios.CancelToken let self = this axios.get('http://jsonplaceholder.typicode.com/comments', { cancelToken: new CancelToken(function executor(c) { self.cancel = c console.log(c) // 這個參數 c 就是CancelToken構造函數里面自帶的取消請求的函數，這里把該函數當參數用 }) }).then(res => { this.items = res.data }).catch(err => { console.log(err) }) //手速夠快就不用寫這個定時器了，點擊取消獲取就可以看到效果了 setTimeout(function () { //只要我們去調用了這個cancel()方法，沒有完成請求的接口便會停止請求 self.cancel() }, 100) }, } ``` 但在我的實戰中，我是將axios封裝為一個實例進行使用的，然后不同的業務請求都封裝為一個方法，所以我的使用時不能直接這樣在業務頁面中直接取消的，而是封裝在了全局單例的axios實例中，具體看下面三個文件即可（全局配置文件、業務請求接口文件、頁面文件）。 ```javascript // request config.js var CancelToken = axios.CancelToken // 請求攔截器 _axios.interceptors.request.use((config) => { config.cancelToken = new CancelToken(function executor(c) { _axios.cancel = c }) return config }) export default _axios ``` ```javascript // 業務 oms.js // oms-channel import {axios} from '../index' // 微服務地址 let scopeUrl = '' let scope = scopeUrl ? `${scopeUrl}/oms` : '/oms' export default { // 業務需要添加cancel方法 cancel: function () { axios.cancel() }, // 房源 house: { // 獲取房源列表 listHouseSpaceManager: (params) => axios.post(`${scope}/house/listHouseSpaceManager`, params), // 更新房源列表 updateHouseSpaceManager: (params) => axios.post(`${scope}/house/updateHouseSpaceManager`, params) }, } ``` ``` // xx.vue為例 methods:{ getData(){ omsApi.house.listHouseSpaceManager(param).then(res => { // codes here }).catch() setTimeout(function () { //只要我們去調用了這個cancel()方法，沒有完成請求的接口便會停止請求 omsApi.cancel() }, 100) } } ```