前端多次调用1个接口，要最后一次请求的数据

ke乐 / 2023-07-25 / 原文

假设你要进行多次调用一个名为`getData()`的接口，并且你只关心最后一次请求的数据。你可以使用以下示例代码来实现：

 1 let lastRequestId = 0; // 记录最后一次请求的ID
 2 let lastResponse = null; // 记录最后一次请求的响应数据
 3 
 4 async function getData() {
 5   const requestId = Date.now(); // 生成一个唯一请求ID
 6 
 7   lastRequestId = requestId; // 记录最后一次请求ID
 8 
 9   try {
10     const response = await fetch('https://api.example.com/data'); // 发起接口请求
11     const data = await response.json(); // 获取请求响应的数据
12 
13     // 只保存最后一次请求的数据
14     if (requestId === lastRequestId) {
15       lastResponse = data;
16     }
17 
18     // 更新页面数据或进行其他操作
19     updatePageData(lastResponse);
20   } catch (error) {
21     // 处理请求错误
22     console.error('请求错误:', error);
23   }
24 }
25 
26 // 示例：连续点击多次调用getData()函数
27 // 只有最后一次请求的数据会被更新到页面上
28 for (let i = 0; i < 10; i++) {
29   getData();
30 }
31 
32 function updatePageData(data) {
33   // 更新页面数据的逻辑
34   console.log('最后一次请求的数据:', data);
35 }

在以上示例中，我们使用`lastRequestId`来记录最后一次请求的ID，每次请求时都将`lastRequestId`更新为当前的请求ID。在请求完成后，我们只会将最后一次请求的数据保存到`lastResponse`变量中，并将其传递给`updatePageData()`函数进行页面数据的更新。

这样，无论连续点击多少次`getData()`函数，只有最后一次请求的数据会被更新到页面上，其他请求的数据不会造成页面数据错乱的问题。