[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) } } ```