场景：几个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();}// 创建一个新的 AbortControllercontroller = 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 置为 nullcontroller = null;}
}// 调用 fetchData 函数
// GET 请求示例
fetchData('https://lutu.com', 'GET');// POST 请求示例
const postData = { key: 'value' };
fetchData('https://lutu.com', 'POST', postData);