这个场景属于一种性能优化吧，面试中也可能会问到你。
话不多说直接上代码

 复制代码
  1. <!DOCTYPE html>
  2.  
  3. <html lang=”en”>
  4.  
  5. <head>
  6.  
  7. <meta charset=”UTF-8″ />
  8.  
  9. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
  10.  
  11. <title>Document</title>
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <h4>Fetch</h4>
  18.  
  19. <p>
  20.  
  21. 如何实现一个缓存机制，使得在Web开发中，当多次发起相同的AJAX请求时，能够保证每次都能获取到数据，但实际上只发送一次请求到服务器，请用
  22.  
  23. JS 实现该方法
  24.  
  25. </p>
  26.  
  27. <div>
  28.  
  29. <button id=”btn”>点击发送</button>
  30.  
  31. </div>
  32.  
  33. <script>
  34.  
  35. const cache = {};
  36. function fetchData(url) {
  38. // 有缓存
  40. if (cache[url]) {
  42. //Promise.resolve() 是 JavaScript 内置的一个方法,用于创建一个立即被解析(fulfill)的 Promise 对象
  44. // return Promise.resolve(cache[url]);
  46. return cache[url];
  48. } else {
  50. // 没有缓存,发起 AJAX 请求
  52. //fetch() 是一个 JavaScript 内置的 API,用于发送 HTTP 请求并获取响应。
  54. return fetch(url)
  56. .then((response) => {
  58. // 将请求得到的数据存入缓存,
  60. // response 它只是一个 HTTP 响应，而不是真的 JSON。
  62. // json()这个方法会异步读取响应体，并且尝试将其解析为 JSON 格式。
  64. if (response.ok) cache[url] = response.json();
  66. return cache[url];
  68. })
  70. .catch((error) => {
  72. console.error(“Error fetching data:”, error);
  74. });
  76. }
  78. }
  79. //addEventListener(“click”, () => {})这是给选定的元素添加事件监听器的方法
  81. document.getElementById(“btn”).addEventListener(“click”, () => {
  83. fetchData(“https://api.realworld.io/api/tags”).then((data) => {
  85. console.log(“Data:”, data);
  87. });
  89. });
  90. </script>
  92. </body>
  94. </html>

这个代码就是我在面试中回答的结果，但是后面面试官又问了另一个问题，
如果接口请求时间比较长，还没返回结果又调用了请求方法，怎么还是只发起一次请求，复用第一次请求的结果？
这个问题我当时想到的是用定时器，具体的操作方法我没有写，但是应该会有一些问题。
现在我推荐的是另一种方法，是直接返回第一次调用的promise，上代码！

 复制代码
  1. <!DOCTYPE html>
  2.  
  3. <html lang=”en”>
  4.  
  5. <head>
  6.  
  7. <meta charset=”UTF-8″ />
  8.  
  9. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
  10.  
  11. <title>Document</title>
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <h4>Fetch</h4>
  18.  
  19. <p>
  20.  
  21. 如何实现一个缓存机制，使得在Web开发中，当多次发起相同的AJAX请求时，能够保证每次都能获取到数据，但实际上只发送一次请求到服务器，请用
  22.  
  23. JS 实现该方法
  24.  
  25. </p>
  26.  
  27. <div>
  28.  
  29. <button id=”btn”>点击发送</button>
  30.  
  31. </div>
  32.  
  33. <script>
  34.  
  35. const cache = {};
  36. function fetchData(url) {
  38. console.log(cache, cache[url], “cache”);
  39. // 有缓存且数据已经准备好
  41. if (cache[url] && cache[url].data) {
  43. return Promise.resolve(cache[url].data);
  45. } else if (cache[url] && cache[url].promise) {
  47. // 有缓存但数据还在请求中，返回之前的请求 promise
  49. console.log(cache[url].promise, “cache[url].promise”);
  51. return cache[url].promise;
  53. } else {
  55. // 没有缓存，发起新的请求
  57. const fetchPromise = fetch(url)
  59. .then((response) => response.json())
  61. .then((data) => {
  63. // 将请求得到的数据存入缓存
  65. cache[url].data = data;
  67. return data;
  69. })
  71. .catch((error) => {
  73. console.error(“Error fetching data:”, error);
  75. });
  76. // 将 promise 存入缓存
  78. cache[url] = { promise: fetchPromise };
  79. return fetchPromise;
  81. }
  83. }
  84. //addEventListener(“click”, () => {})这是给选定的元素添加事件监听器的方法
  86. document.getElementById(“btn”).addEventListener(“click”, () => {
  88. fetchData(“https://api.realworld.io/api/tags”).then((data) => {
  90. console.log(“Data:”, data);
  92. });
  94. });
  96. </script>
  98. </body>
  100. </html>

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