javascript 请求相同API的结果是否会被覆盖？

gxwragnw 于 2023-01-29 发布在 Java

关注(0)|答案(1)|浏览(117)

我有两个用于触发请求的按钮，这两个按钮都是对同一个API的数据请求，不同的按钮代表不同的参数。
例如，按钮A请求2023年的数据，按钮B请求2022年的数据：

// Click button A
fetch('same/api', {
  body: {
    year: 2023
  }
}).then(res => {
  store = res;
})

// Click button B
fetch('same/api', {
  body: {
    year: 2022
  }
}).then(res => {
  store = res;
})

变量store用于存储响应数据。
我的问题是：当我在很短的时间间隔内点击按钮A，然后点击按钮B时，按钮A的响应结果是否会覆盖按钮B的响应结果？如果是，如何解决此缺陷？
我在codepen上创建了一个简单的演示：simple demo.
问题更新：过期的响应会错误地覆盖正确的结果，现在的问题是如何修复此缺陷。现有解决方案：
1.使用同步原语
1.使用对象或Map将结果与标识符分开存储

discard the request
有人知道哪种方法更好吗？或者有别的方法来解决这个问题吗？

JavaScript

来源：https://stackoverflow.com/questions/75254899/will-the-results-of-a-request-to-the-same-api-be-overwritten

1条答案

按热度按时间

kqlmhetl1#

您可以检查响应是否涉及最近请求的年份。如果不涉及，则忽略响应：

const store = document.querySelector(".display");
const lastFetch = document.querySelector("#lastfetch");

function mockRequest(value) {
    return new Promise((resolve, reject) => {
        const timeCost = Math.random() * 5000;
        setTimeout(() => {
            console.log(`fetch ${value} cost: ${timeCost}`);
            resolve(`Data fetched for year ${value}`);
        }, timeCost);
    });
}

function query(value) {
    if (value) {
        lastFetch.textContent = value;
        mockRequest(value).then((res) => {
            if (value != lastFetch.textContent) {
                console.log(`Got late response for year ${value}: ignored`);
                return;
            }
            store.textContent = res;
        });
    } else {
        lastFetch.textContent = "";
        store.textContent = "no data to display";
    }
}

<div class="display">no data to display</div>
<!--  request trigger buttons  -->
<button onclick="query(2022)">2022</button>
<button onclick="query(2023)">2023</button>
<button onclick="query()">reset</button>
<div>Last Fetch: <span id="lastfetch"></span></div>

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 请求相同API的结果是否会被覆盖？

1条答案

相关问题

热门标签

最新问答