Svelte组件异步查询旧数据覆盖问题的解决方案问询

这是不是异步竞态条件？ #

是的，这是典型的异步竞态条件：当modelEntityId频繁变化时，多个runQuery异步调用会同时处于pending状态，请求按用户操作顺序发起，但网络返回顺序完全不可控——晚发起的新请求可能先返回，而早发起的旧请求后返回，这时旧请求的结果会错误覆盖新请求的数据，导致显示内容和用户当前选择不匹配。

解决方案 #

下面是几种实用的解决思路，按推荐优先级排序：

1. 用AbortController主动取消旧请求（最优方案）

这种方式能直接终止未完成的旧请求，既解决竞态问题，又节省网络和后端资源。需要修改两部分代码：组件内的请求逻辑，以及底层getQueryData方法使其支持取消信号。

修改后的组件代码：

<script>
  export let modelEntityId, entityNode, accessorDelegates

  let data
  let abortController; // 维护当前请求的控制器

  async function runQuery() {
    // 先取消之前未完成的请求
    if (abortController) {
      abortController.abort();
    }
    // 创建新的控制器
    abortController = new AbortController();
    const signal = abortController.signal;

    const newQuery = new Query()
    newQuery.setRequest({
      statement: entityNode.statementName,
      columns: entityNode.columns,
      filters: {[entityNode.entityIdColumn]: modelEntityId}
    })

    try {
      // 把取消信号传给getQueryData
      if (await accessorDelegates.getQueryData(newQuery, signal)) {
        // 只有请求未被取消时才更新数据
        if (!signal.aborted) {
          data = newQuery.response.data
        }
      }
    } catch (err) {
      // 捕获取消请求的错误，无需处理
      if (err.name !== 'AbortError') throw err;
    } finally {
      // 如果当前控制器已经被新请求替换，就清空引用
      if (abortController.signal === signal) {
        abortController = null;
      }
    }
  }

  $: modelEntityId && runQuery()
</script>

同时修改getQueryData方法，在fetch中传入信号：

// App.svelte中的getQueryData实现示例
async function getQueryData(query, signal) {
  try {
    const response = await fetch('/api/query', {
      method: 'POST',
      body: JSON.stringify(query.request),
      signal: signal // 传入取消信号
    });
    query.response = await response.json();
    return true;
  } catch (err) {
    // 处理其他错误
    return false;
  }
}

2. 请求结果校验（快速适配方案）

如果暂时无法修改底层getQueryData，可以在组件内对请求结果做校验：记录发起请求时的modelEntityId，当请求返回时，对比当前的modelEntityId，只有两者一致才更新数据。

修改后的runQuery函数：

async function runQuery() {
  // 记录发起请求时的实体ID
  const currentEntityId = modelEntityId;

  const newQuery = new Query()
  newQuery.setRequest({
    statement: entityNode.statementName,
    columns: entityNode.columns,
    filters: {[entityNode.entityIdColumn]: currentEntityId}
  })

  if (await accessorDelegates.getQueryData(newQuery)) {
    // 只有当前实体ID和发起时一致，才更新数据
    if (currentEntityId === modelEntityId) {
      data = newQuery.response.data
    }
  }
}

这种方式实现简单，但旧请求仍会完成，会浪费一定的网络和后端资源。

3. 用唯一请求ID标记（复杂参数场景适配）

如果请求参数不止modelEntityId，可以生成唯一ID标记每个请求，返回时验证ID是否为当前活跃请求的ID：

<script>
  export let modelEntityId, entityNode, accessorDelegates

  let data
  let activeRequestId = 0;

  async function runQuery() {
    const requestId = ++activeRequestId;

    const newQuery = new Query()
    newQuery.setRequest({
      statement: entityNode.statementName,
      columns: entityNode.columns,
      filters: {[entityNode.entityIdColumn]: modelEntityId}
    })

    if (await accessorDelegates.getQueryData(newQuery)) {
      // 只有当前请求是最新的，才更新数据
      if (requestId === activeRequestId) {
        data = newQuery.response.data
      }
    }
  }

  $: modelEntityId && runQuery()
</script>

方案选择建议 #

• 优先选AbortController：从根源解决问题，避免无效请求，性能最优；
• 快速修复选结果校验：无需修改底层逻辑，代码改动最小；
• 参数复杂场景选唯一ID标记：适配多参数变化的请求，逻辑清晰。

内容的提问来源于stack exchange，提问作者Paul W