前端接口请求截流，实现客户端接口请求304

背景

在业务抽象的时候，我们通常会把与当前业务相关的所有内容都抽象到一个组件内。比如选人选部门这个功能。我们在抽象的时候，会把获取用户列表和部门列表数据的功能封装到选人选部门组件内部。

抽象后的问题

当该业务组件在一个页面被多次使用的时候，会产生多个实体，会导致组件内的接口被重复调用，性能下降。比如上述的选人选部门组件。 当一个页面有多个选人选部门组件的时候，每个组件都会发一次请求用户列表和部门列表的接口。

解决办法

** 当前页面的所有相同组件的实例请求一次接口，相比较于发起请求后服务器端返回304，节约了资源，实现了客户端304**

难点

所有实例几乎是同时被渲然，同时执行组件的生命周期实体渲然是无序的，如何区分、记录每个实例对应的请求

解决方法

内存缓存 + 异步

1. 定义两个内存堆栈变量，用 url + params 作为key
2. 第一个内存变量为 请求中的数据 pending
3. 第二个内存变量为 请求返回的数据 resultData
4. 对组件的请求request和拦截
5. 每个请求都是一个Promise对象，pending堆 记录 resolve
6. pending堆没有key时，发request请求
7. pending堆能找到key 时，创建Promise 记录 resolve
8. request回来的时候，从pending堆中找到相同key的 resolve方法，并且依次根据key 执行resolve
9. resultData堆中根据key 记录返回的结果
10. 在第4步中的拦截开始，根据key查找 resultData堆，如果有数据直接返回，没有数据从5开始。

具体实现

github.com/xuqiang1227…

相关知识

如果请求头中带有If-None-Match或If-Modified-Since，则会到源服务器进行有效性校验，如果源服务器资源没有变化，则会返回304；如果有变化，则返回200；