多次调用请求方法每次都有返回数据,但是只发起一次接口请求怎么做?

这个场景属于一种性能优化吧,面试中也可能会问到你。

话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4>Fetch</h4>
    <p>
      如何实现一个缓存机制,使得在Web开发中,当多次发起相同的AJAX请求时,能够保证每次都能获取到数据,但实际上只发送一次请求到服务器,请用
      JS 实现该方法
    </p>
    <div>
      <button id="btn">点击发送</button>
    </div>
    <script>
       const cache = {};

       function fetchData(url) {
         // 有缓存
         if (cache[url]) {
           //Promise.resolve() 是 JavaScript 内置的一个方法,用于创建一个立即被解析(fulfill)的 Promise 对象
           // return Promise.resolve(cache[url]);
           return cache[url];
         } else {
           // 没有缓存,发起 AJAX 请求
           //fetch() 是一个 JavaScript 内置的 API,用于发送 HTTP 请求并获取响应。
           return fetch(url)
             .then((response) => {
               // 将请求得到的数据存入缓存,
               // response  它只是一个 HTTP 响应,而不是真的 JSON。
               // json()这个方法会异步读取响应体,并且尝试将其解析为 JSON 格式。
               if (response.ok) cache[url] = response.json();
               return cache[url];
             })
             .catch((error) => {
               console.error("Error fetching data:", error);
             });
         }
       }

      //addEventListener("click", () => {})这是给选定的元素添加事件监听器的方法
      document.getElementById("btn").addEventListener("click", () => {
        fetchData("https://api.realworld.io/api/tags").then((data) => {
          console.log("Data:", data);
        });
      });
      
    </script>
  </body>
</html>

这个代码就是我在面试中回答的结果,但是后面面试官又问了另一个问题,

        如果接口请求时间比较长,还没返回结果又调用了请求方法,怎么还是只发起一次请求,复用第一次请求的结果?

        这个问题我当时想到的是用定时器,具体的操作方法我没有写,但是应该会有一些问题。

现在我推荐的是另一种方法,是直接返回第一次调用的promise,上代码!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4>Fetch</h4>
    <p>
      如何实现一个缓存机制,使得在Web开发中,当多次发起相同的AJAX请求时,能够保证每次都能获取到数据,但实际上只发送一次请求到服务器,请用
      JS 实现该方法
    </p>
    <div>
      <button id="btn">点击发送</button>
    </div>
    <script>
      const cache = {};

      function fetchData(url) {
        console.log(cache, cache[url], "cache");

        // 有缓存且数据已经准备好
        if (cache[url] && cache[url].data) {
          return Promise.resolve(cache[url].data);
        } else if (cache[url] && cache[url].promise) {
          // 有缓存但数据还在请求中,返回之前的请求 promise
          console.log(cache[url].promise, "cache[url].promise");
          return cache[url].promise;
        } else {
          // 没有缓存,发起新的请求
          const fetchPromise = fetch(url)
            .then((response) => response.json())
            .then((data) => {
              // 将请求得到的数据存入缓存
              cache[url].data = data;
              return data;
            })
            .catch((error) => {
              console.error("Error fetching data:", error);
            });

          // 将 promise 存入缓存
          cache[url] = { promise: fetchPromise };

          return fetchPromise;
        }
      }

      //addEventListener("click", () => {})这是给选定的元素添加事件监听器的方法
      document.getElementById("btn").addEventListener("click", () => {
        fetchData("https://api.realworld.io/api/tags").then((data) => {
          console.log("Data:", data);
        });
      });
    </script>
  </body>
</html>

将第一次请求的promise存储起来,在请求还没成功的时候,返回promise对象,相当于返回的就是第一次请求的内容结果

相关推荐

  1. react怎么接口请求

    2024-07-20 12:26:05       40 阅读
  2. postman发送post请求正常,但是还是乱码.

    2024-07-20 12:26:05       64 阅读
  3. 封装数据请求方法接口方法

    2024-07-20 12:26:05       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 12:26:05       169 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 12:26:05       185 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 12:26:05       155 阅读
  4. Python语言-面向对象

    2024-07-20 12:26:05       169 阅读

热门阅读

  1. am start -W 命令详解-可以测量应用启动时间的命令

    2024-07-20 12:26:05       34 阅读
  2. 很详细!接口使用教程(二)

    2024-07-20 12:26:05       39 阅读
  3. 分布式Session共享的5类技术方案,与优劣势比较

    2024-07-20 12:26:05       30 阅读
  4. 火星地图插件

    2024-07-20 12:26:05       34 阅读
  5. 白骑士的PyCharm教学目录

    2024-07-20 12:26:05       35 阅读
  6. Mathematical Problem

    2024-07-20 12:26:05       27 阅读