如何避免请求超限错？

一、优化代码

请求超限错通常是由于代码不优化导致的，因此在编写代码时需要注意以下几点：

1、避免无限制循环和递归。

// 无限制递归导致请求超限错
function recursion(i) {
   if (i === 0) {
      return;
   }
   recursion(i+1);
}
recursion(1);

2、减少重复代码的执行次数。

// 多次调用同一个接口导致请求超限错
function getData() {
   return fetch('http://xxx.com/api/data')
}

// 调用getData()多次
getData();
getData();
getData();

3、使用缓存。

// 使用缓存减少接口请求
const cache = {};
function getData(id) {
   if (cache[id]) {
      return cache[id];
   }
   const data = fetch(`http://xxx.com/api/data/${id}`);
   cache[id] = data;
   return data;
}

二、增加请求限制

当服务端由于某些原因不能在短时间内增加服务能力，则有必要在客户端设置请求限制。下面是一些设置请求限制的方法：

1、设置请求间隔时间。

// 设置请求间隔时间为1秒钟
let canRequest = true;
function getData() {
   if (canRequest) {
      canRequest = false;
      fetch('http://xxx.com/api/data')
      setTimeout(() => {
         canRequest = true;
      }, 1000);
   }
}

2、设置请求次数限制。

// 设置一分钟内最多可以请求10次
let requestCount = 0;
let startTime = Date.now();
function getData() {
   if (requestCount < 10 && Date.now() - startTime < 60000) {
      requestCount++;
      fetch('http://xxx.com/api/data')
   }
}

三、使用缓存

使用缓存可以减少接口请求次数，从而避免请求超限错。

1、浏览器缓存。

// 设置接口请求缓存10分钟
fetch('http://xxx.com/api/data', {cache: 'force-cache'});

2、使用LocalStorage。

// 使用LocalStorage缓存接口数据
function getData(id) {
   const cacheKey = `data-${id}`;
   if (localStorage.getItem(cacheKey)) {
      return JSON.parse(localStorage.getItem(cacheKey));
   }
   const data = fetch(`http://xxx.com/api/data/${id}`);
   localStorage.setItem(cacheKey, JSON.stringify(data));
   return data;
}

四、使用CDN技术

使用CDN技术可以将静态资源文件缓存在CDN节点，加快服务响应速度。

1、引入CDN资源。

// 引入jQuery CDN资源
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2、使用缓存控制头。

// 在服务端设置缓存控制头，将静态资源缓存1小时
Cache-Control: max-age=3600

五、使用分布式架构

使用分布式架构可以将服务负载分散到多台服务器上，从而提高服务响应能力。

1、使用负载均衡器。

// 将请求通过负载均衡器转发到多台服务器上
let servers = ['http://server1.com', 'http://server2.com'];
let index = 0;
function getData() {
   const server = servers[index];
   index = (index + 1) % servers.length;
   fetch(`${server}/api/data`);
}

2、使用缓存服务器。

// 使用Redis作为缓存服务器
const cache = require('redis')();
function getData(id) {
   if (cache.get(`data-${id}`)) {
      return JSON.parse(cache.get(`data-${id}`));
   }
   const data = fetch(`http://xxx.com/api/data/${id}`);
   cache.set(`data-${id}`, JSON.stringify(data));
   return data;
}

六、使用监控工具

使用监控工具可以及时发现系统的问题，及时进行处理，避免请求超限错。

1、使用Prometheus。

// 使用Promethues监控系统各项指标
const Prometheus = require('prometheus')();
Prometheus.counter('requests_total', 'The total number of requests served');
fetch('http://xxx.com/api/data')
Prometheus.get('requests_total').inc();

2、使用Grafana。

// 使用Grafana展示Prometheus监控数据
const Grafana = require('grafana')();
Grafana.add_panel(Graph('requests_total'));