前端连续发送同一个请求时，终止上一次请求

场景：几个tab页之间快速的切换（tab页只是参数不同，下边的数据渲染给同一个data）就会导致如果我在1,2,3，tab页按照顺序快速点击，发送三个请求，我想要展示的是3但是如果1或者2请求响应的时间比3长那么就会导致我最终渲染的数据是1的。

画个图理解一下：

比如X轴为请求，Y轴为每个请求响应的时间，这三个请求按顺序发送那么渲染的data会先为3然后为2最终变成了1，但是此时tab页是绑定的是3。

解决：

let controller = null;

async function fetchData(url, method, data) {
  // 如果存在上一个请求，则终止它
  if (controller) {
    controller.abort();
  }

  // 创建一个新的 AbortController
  controller = new AbortController();
  const signal = controller.signal;

  try {
    let options = { signal, method };
    if (method === 'POST' && data) {
      options.body = JSON.stringify(data);
      options.headers = { 'Content-Type': 'application/json' };
    }

    const response = await fetch(url, options);
    const responseData = await response.json();
    console.log(responseData);
  } catch (error) {
    console.error('Request aborted or network error', error);
  } finally {
    // 请求完成后将 controller 置为 null
    controller = null;
  }
}

// 调用 fetchData 函数
// GET 请求示例
fetchData('https://lutu.com', 'GET');

// POST 请求示例
const postData = { key: 'value' };
fetchData('https://lutu.com', 'POST', postData);