假设你要进行多次调用一个名为`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()`函数,只有最后一次请求的数据会被更新到页面上,其他请求的数据不会造成页面数据错乱的问题。
标签:调用,请求,data,前端,接口,lastRequestId,getData,数据,ID From: https://www.cnblogs.com/liying66/p/17580735.html