飘风不终朝

---

希言自然。 飘风不终朝，暴雨不终日。 孰为此，天地而弗能久，又况于人乎。

---

遇到一个因为接口返回太慢导致页面数据错乱的问题：A 和 B 两个页面都是通过接口拿到一些数据在页面上显示标记点，在地图上渲染点的逻辑在写在了一个组件上。

于是出现了点击 A 再迅速点击 B，B 的数据先拿到渲染好了，然后 A 的数据才拿到，在 B 页面渲染了 A 的数据。

想到了 fetch 有个中止请求的 方法，用起来也很简单：

• 在封装请求的地方，先声明一个数组，用来存放中止请求的控制器。
• 在发起请求的时候，创建控制器并放到数组里。
• 在 fetch 参数里添加 signal: controller.signal

const controllerList: AbortController[] = []

export const abortReq = () => {
  controllerList.forEach(x => {
    x?.abort('取消了本次请求');
  })
  controllerList.length = 0;
}

const baseHeader = () => {
    // 创建控制器，并放入数组
    const controller = new AbortController();
    controllerList.push(controller)
    return {
            // ...
            signal: controller.signal
    }
}

然后导出一个中止请求的方法，在切换页面的时候，终止掉不需要的请求。