本文共 1166 字，大约阅读时间需要 3 分钟。

写前端代码时，有时候需要先执行更新操作再进行查询操作。然而，fetch API 是异步的，直接按顺序书写两个 fetch 可能会导致意想不到的结果，因为消息会被轮队处理，无法保证先更新后查询的顺序。

错误原因

当更新 fetch 需要更长时间完成时，即使将更新 fetch 放在查询 fetch 之前，两者仍然会并行执行。更新完成后才会处理查询，结果为先查询再更新，这与我们的预期相反。

解决方法

为了确保先更新后查询，可以将查询 fetch 放在更新 fetch 的回调函数 (then) 中。这样，更新操作完成后，才会执行查询操作。这意味着在回调中需要返回一个有意义的值来保持合法性。

实现步骤

具体实现如下：

async function updateData() {
  try {
    const response = await fetch('/update', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ some: 'data' }),
    });
    // 必须返回合法的值
    return response.json();
  } catch (error) {
    console.error('更新失败:', error);
    return null;
  }
}
async function queryData() {
  try {
    const response = await fetch('/query', {
      method: 'GET',
    });
    return response.json();
  } catch (error) {
    console.error('查询失败:', error);
    return null;
  }
}
// 执行更新
updateData().then((updateResult) => {
  // 执行查询
  queryData().then((queryResult) => {
    console.log('更新成功后查询结果:', queryResult);
  });
});

注意事项

通过以上方法，可以确保存在先更新后查询的顺序，同时保持代码的可读性和可维护性。