头图

前端API请求的各种骚操作

Dickens
English

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

API请求的控制一直以来都是前端领域的热点问题,市面上已经有很多优秀的开源项目可供使用。本文本着授人以渔的精神,抛开所有的工具函数,介绍各种场景下如何用最朴素的代码解决实际问题。

二、并发控制

在某些场景中,前端需要在短时间内发送大量的网络请求,同时又不能占用太多的系统资源,这就要求对请求做并发控制了。这里的请求既可能是同一个接口,也可能是多个接口,一般还要等所有接口都返回后再做统一的处理。为了提高效率,我们希望一个请求完成时马上把位置空出来,接着发起新的请求。这里我们可以综合运用 Promise 的2个工具方法达到目的,分别是 raceall

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 进行订阅,类似于 domaddEventListener
  • 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/awaitES7 的特性,用 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,将 resolvereject 存到 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 掉,触发一个名为 AbortErrorDOMException

四、淘汰请求

像搜索框这种场景,需要在用户边输入的时候边提示搜索建议,这就需要短时间内发送多个请求,而且前面发出的请求结果不能覆盖后面的(网络阻塞可能导致先发出的请求后返回)。可以通过下面这种方式实现过期需求的淘汰。

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

阅读 985

睿Talk
记录个人和团队技术成长的点点滴滴
5.1k 声望
354 粉丝
0 条评论
你知道吗?

5.1k 声望
354 粉丝
宣传栏