如何中止loaders.gl load方法的fetch请求及deck.gl TileLayer瓦片请求？

loaders.gl的load方法支持通过AbortController来中止请求，具体操作如下：

• 先创建AbortController实例，取出对应的信号对象：

  const controller = new AbortController();
  const { signal } = controller;
  

• 调用load时，在配置项的fetch字段里传入这个signal：

  import { load } from '@loaders.gl/core';
  import { JSONLoader } from '@loaders.gl/json';
  
  const loadTask = load('your-data-url', JSONLoader, {
    fetch: { signal }
  });
  

• 需要中止请求时，调用controller.abort()即可，此时load返回的Promise会抛出AbortError，可以用try/catch捕获处理：

  // 主动中止请求
  controller.abort();
  

deck.gl的TileLayer本身会自动跟踪视口内的瓦片，当瓦片移出视口时，会触发请求中止逻辑。如果是自定义getTileData方法，只需利用TileLayer传入的signal参数即可：

• 在getTileData中，把signal绑定到fetch请求上：

  const tileLayer = new TileLayer({
    getTileData: async (tile, context) => {
      // context.signal会在瓦片移出视口时自动触发中止
      const res = await fetch(`/tiles/${tile.z}/${tile.x}/${tile.y}`, {
        signal: context.signal
      });
      return res.json();
    }
  });
  

• 如果有自定义的异步操作，还可以监听signal的abort事件来清理相关资源：

  getTileData: async (tile, { signal }) => {
    signal.addEventListener('abort', () => {
      // 这里清理自定义异步资源，比如临时的WebSocket连接等
    });
    
    const res = await fetch(`/tiles/${tile.z}/${tile.x}/${tile.y}`, { signal });
    return res.json();
  }
  

这样TileLayer就能自动中止所有视口外瓦片的请求，无需手动干预。

内容的提问来源于stack exchange，提问作者Sairam Gourishetty