fetch设置接口只请求一次

在JavaScript中，`fetch`是一个用于发起获取资源的Web API，它返回一个Promise对象。为了避免重复发起相同的请求，可以采用以下几种方法确保接口只被请求一次：

1. 使用标志位（Flag）控制：可以在发起请求之前设置一个标志位，表示当前正在请求中。当请求完成后再将标志位复位。如果在请求过程中又有新的请求发起，则检查标志位，如果是正在请求中，则不重复发起。

   let isFetching = false;
   const fetchResource = async (url) => {
       if (isFetching) return;
       isFetching = true;
       const response = await fetch(url);
       isFetching = false;
       return response;
   };

2. 使用防抖（Debounce）或节流（Throttle）技术：这两种技术可以控制函数触发的频率。防抖是在函数触发后的一定时间内，如果再次触发则重置计时器，直到计时器结束后才会执行函数；节流则是规定一个时间内只执行一次函数。

   const debounce = (func, wait) => {
       let timeout;
       return function executedFunction(...args) {
           const later = () => {
               clearTimeout(timeout);
               func(...args);
           };
           clearTimeout(timeout);
           timeout = setTimeout(later, wait);
       };
   };

   const fetchResource = debounce(async (url) => {
       // Fetch code here
   }, 300);

3. 缓存响应结果：如果你只需要请求一次数据，获取结果后可以将其存储起来，当下次需要相同数据时直接使用存储的结果。

   const cache = new Map();
   const fetchResource = async (url) => {
       if (cache.has(url)) {
           return cache.get(url);
       }
       const response = await fetch(url);
       const data = await response.json();
       cache.set(url, data);
       return data;
   };