欢送关注我的公众号睿Talk，获取我最新的文章：
一、前言
API申请的管制始终以来都是前端畛域的热点问题，市面上曾经有很多优良的开源我的项目可供使用。本文本着授人以渔的精力，抛开所有的工具函数，介绍各种场景下如何用最奢侈的代码解决理论问题。
二、并发管制
在某些场景中，前端须要在短时间内发送大量的网络申请，同时又不能占用太多的系统资源，这就要求对申请做并发管制了。这里的申请既可能是同一个接口，也可能是多个接口，个别还要等所有接口都返回后再做对立的解决。为了提高效率，咱们心愿一个申请实现时马上把地位空进去，接着发动新的申请。这里咱们能够综合使用 Promise 的2个工具办法达到目标，别离是 race 和 all。
async function concurrentControl(poolLimit, requestPool) { // 寄存所有申请返回的 promise const ret = []; // 正在执行的申请，用于管制并发 const executing = []; while (requestPool.length > 0) { const request = requestPool.shift(); const p = Promise.resolve().then(() => request()); ret.push(p); // p.then()返回一个新的 promise，示意以后申请的状态 const e = p.then(() => executing.splice(executing.indexOf(e), 1)); executing.push(e); if (executing.length >= poolLimit) { await Promise.race(executing); } } return Promise.all(ret);}其中这行代码比拟要害：const e = p.then(() => executing.splice(executing.indexOf(e), 1))
要正确的了解这行代码，必须了解 promise 的以下特点：
- p.then() 的返回值是一个
promise，then 函数是同步执行代码 - p.then() 的作用是对
p这个promise进行订阅，相似于dom的addEventListener - then(fn) 中的 fn 要等到
promiseresolve 后，才会被 JS 引擎放在微工作队列里异步执行
所以下面代码真正的执行程序是：
const e = p.then(fn);executing.push(e);// p resolve 后执行 fn() => executing.splice(executing.indexOf(e), 1)上面是测试代码，感兴趣的能够自行验证。
let i = 0;function generateRequest() { const j = ++i; return function request() { return new Promise(resolve => { console.log(`r${j}...`); setTimeout(() => { resolve(`r${j}`); }, 1000 * j); }) }}const requestPool = [generateRequest(), generateRequest(), generateRequest(), generateRequest()];async function main() { const results = await concurrentControl(2, requestPool); console.log(results);}main();后面的实现里用到的 async/await 是 ES7 的个性，用 ES6 也能实现雷同的成果。
function concurrentControl(poolLimit, requestPool) { // 寄存所有申请返回的 promise const ret = []; // 正在执行的申请，用于管制并发 const executing = []; function enqueue() { const request = requestPool.shift(); if (!request) { return Promise.resolve(); } const p = Promise.resolve().then(() => request()); ret.push(p); let r = Promise.resolve(); const e = p.then(() => executing.splice(executing.indexOf(e), 1)); executing.push(e); if (executing.length >= poolLimit) { r = Promise.race(executing); } return r.then(() => enqueue()); } return enqueue().then(() => Promise.all(ret));}这里应用的是函数嵌套调用的形式，代码实现起来没有 async/await 的写法简洁，但有另外一个益处，反对动静增加新的申请：
const requestPool = [generateRequest(), generateRequest(), generateRequest(), generateRequest()];function main() { concurrentControl(2, requestPool).then(results => console.log(results)); // 动静增加新申请 requestPool.push(generateRequest());}从代码能够看出，requestPool 的申请实现前，咱们都能够动静往里面增加新的申请，适宜一些依据条件发动申请的场景。
三、节流管制
传统的节流是管制申请发送的机会，而本文的提到的节流是通过公布订阅的设计模式，复用申请的后果，实用于在短时间内发送多个雷同申请的场景。代码如下：
function generateRequest() { let ongoing = false; const listeners = []; return function request() { if (!ongoing) { ongoing = true return new Promise(resolve => { console.log('requesting...'); setTimeout(() => { const result = 'success'; resolve(result); ongoing = false; if (listeners.length <= 0) return; while (listeners.length > 0) { const listener = listeners.shift(); listener && listener.resolve(result); } }, 1000); }) } return new Promise((resolve, reject) => { listeners.push({ resolve, reject }) }) }}这里的关键点是如果有正在进行的申请，则新建一个 promise，将 resolve 和 reject 存到 listeners 数组中，订阅申请的后果。
测试代码如下：
const request = generateRequest();request().then(data => console.log(`invoke1 ${data}`));request().then(data => console.log(`invoke2 ${data}`));request().then(data => console.log(`invoke3 ${data}`));三、勾销申请
勾销申请有 2 种实现思路，先来看第一种。
通过设置一个 flag 来管制申请的有效性，上面联合 React Hooks 来进行解说。
useEffect(() => { // 有效性标识 let didCancel = false; const fetchData = async () => { const result = await getData(query); // 更新数据前判断有效性 if (!didCancel) { setResult(result); } } fetchData(); return () => { // query 变更时设置数据生效 didCancel = true; }}, [query]);在申请返回后，先判断申请的有效性，如果有效了就疏忽后续的操作。
下面的实现形式其实不是真正的勾销，更贴切的说是抛弃。如果想实现真正的勾销申请，就要用到 AbortController API，示例代码如下：
const controller = new AbortController();const signal = controller.signal;setTimeout(() => controller.abort(), 5000);fetch(url, { signal }).then(response => { return response.text();}).then(text => { console.log(text);}).catch(err => { if (err.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('Uh oh, an error!', err); }});当调用 abort() 时，promise 会被 reject 掉，触发一个名为 AbortError 的 DOMException。
四、淘汰申请
像搜寻框这种场景，须要在用户边输出的时候边提醒搜寻倡议，这就须要短时间内发送多个申请，而且后面收回的申请后果不能笼罩前面的（网络阻塞可能导致先收回的申请后返回）。能够通过上面这种形式实现过期需要的淘汰。
// 申请序号let seqenceId = 0;// 上一个无效申请的序号let lastId = 0;function App() { const [query, setQuery] = useState('react'); const [result, setResult] = useState(); useEffect(() => { const fetchData = async () => { // 发动一个申请时，序号加 1 const curId = ++seqenceId; const result = await getData(query); // 只展现序号比上一个无效序号大的数据 if (curId > lastId) { setResult(result); lastId = curId; } else { console.log(`discard ${result}`); fetchData(); }, [query]); return ( ... );}这里的关键点是比拟申请返回时，申请的序号是不是比上一个无效申请大。如果不是，则阐明一个前面发动的申请先响应了，以后的申请应该抛弃。
五、总结
本文列举了前端解决API申请时的几个非凡场景，包含并发管制、节流、勾销和淘汰，并依据每个场景的特点总结出了解决形式，在保证数据有效性的同时晋升了性能。