前端API请求的各种骚操作

欢迎关注我的公众号睿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请求时的几个特殊场景，包括并发控制、节流、取消和淘汰，并根据每个场景的特点总结出了解决方式，在保证数据有效性的同时提升了性能。