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

let lastRequestId = 0; // 记录最后一次请求的ID
let lastResponse = null; // 记录最后一次请求的响应数据

async function getData() {
  const requestId = Date.now(); // 生成一个唯一请求ID
  
  lastRequestId = requestId; // 记录最后一次请求ID
  
  try {
    const response = await fetch('https://api.example.com/data'); // 发起接口请求
    const data = await response.json(); // 获取请求响应的数据
    
    // 只保存最后一次请求的数据
    if (requestId === lastRequestId) {
      lastResponse = data;
       // 更新页面数据或进行其他操作
      updatePageData(lastResponse);
    }
  } catch (error) {
    // 处理请求错误
    console.error('请求错误:', error);
  }
}

// 示例:连续点击多次调用getData()函数
// 只有最后一次请求的数据会被更新到页面上
for (let i = 0; i < 10; i++) {
  getData();
}

function updatePageData(data) {
  // 更新页面数据的逻辑
  console.log('最后一次请求的数据:', data);
}

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

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

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐