如何避免請求超限錯？

一、優化代碼

請求超限錯通常是由於代碼不優化導致的，因此在編寫代碼時需要注意以下幾點：

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'));