关于前端:前端API请求的各种骚操作

7次阅读

共计 4497 个字符，预计需要花费 12 分钟才能阅读完成。

欢送关注我的公众号 睿 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 要等到 promise resolve 后，才会被 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 申请时的几个非凡场景，包含并发管制、节流、勾销和淘汰，并依据每个场景的特点总结出了解决形式，在保证数据有效性的同时晋升了性能。

正文完