如何同步多次有序执行fetch请求且避免浏览器冻结？

哥们，我太懂你这个痛点了——既要保证输出和输入地址顺序完全一致，又不能用同步AJAX搞僵浏览器。其实用ES6的async/await就能完美解决，再加上超时控制，完全避开你说的两难局面。

先给你拆解下原来的问题：

• 你之前的循环里直接调用geocode，相当于一下子把所有请求都发出去了，哪个接口响应快就先输出，顺序自然乱了。
• 同步AJAX（async: false）是真的坑，直接卡死主线程，超时设置还不生效，完全不能用。

接下来给你具体的解决办法，一步步来：

第一步：给Fetch加超时功能 #

先封装一个带超时的fetch函数，这样某个地址请求超时的时候，能立刻触发错误处理，不会一直挂着：

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
}

这个函数用Promise.race，要么等请求完成，要么等超时定时器触发，哪个先到就走哪个逻辑，完美解决超时卡住的问题。

第二步：改成串行异步请求 #

把原来的循环改成async函数里的for...of循环，用await等待每个请求处理完再发下一个，这样就能严格保证顺序：

我把你的geocode函数改成了async函数，同时调整了错误处理（原来的错误函数依赖返回的响应，现在要直接传当前地址）：

async function geocode(address) {
  if (!address.trim()) return; // 跳过空行，避免无效请求
  const querystring = encodeURI(address);
  const url = baseUrl + querystring;
  try {
    const response = await fetchWithTimeout(url);
    // 顺便加个HTTP状态码判断，比如404/500也能触发错误
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const geoclientResp = await response.json();
    writeSuccesOutput(geoclientResp);
  } catch (error) {
    writeErrorOutput(address, error.message);
  }
}

然后把读取文件后的循环改成串行的：

reader.onloadend = async function (event) {
  output.textContent = '';
  const addressList = event.target.result.split("\n");
  // 用for...of+await，每个请求完成后再处理下一个地址
  for (const address of addressList) {
    await geocode(address);
  }
};

还要调整错误处理函数，改成接收地址和错误信息：

function writeErrorOutput(address, error) {
  const cleanAddress = address.replace(/(?:\r\n|\r|\n)/g,"");
  const message = `${cleanAddress} ERROR ${error}\n`;
  output.textContent += message;
}

完整修改后的代码 #

把所有改动整合到你的HTML里，直接就能用：

<!DOCTYPE html>
<html>
<head>
<body>
<h1>LAS - Find My District Widget</h1>
<h2>Select a text file (.txt) with a list of addresses - each in a new line. The Widget will return the corresponding districts.</h2>
<input id="input-file" type="file">
<hr>
<textarea id="output-box" cols="250"></textarea>
<script>
const baseUrl = "https://changedthistoprotectprivacy";
const input = document.getElementById('input-file');
const output = document.getElementById('output-box');

function writeSuccesOutput(geoclientResp) {
  const address = geoclientResp.input.replace(/(?:\r\n|\r|\n)/g,"");
  const cityCouncil = geoclientResp['results'][0].response.cityCouncilDistrict;
  const addressWithCcd = `${address} City Council District ${cityCouncil}\n`;
  output.textContent += addressWithCcd;
}

function writeErrorOutput(address, error) {
  const cleanAddress = address.replace(/(?:\r\n|\r|\n)/g,"");
  const message = `${cleanAddress} ERROR ${error}\n`;
  output.textContent += message;
}

function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Request timed out')), timeout)
    )
  ]);
}

async function geocode(address) {
  if (!address.trim()) return;
  const querystring = encodeURI(address);
  const url = baseUrl + querystring;
  try {
    const response = await fetchWithTimeout(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const geoclientResp = await response.json();
    writeSuccesOutput(geoclientResp);
  } catch (error) {
    writeErrorOutput(address, error.message);
  }
}

const reader = new FileReader();
reader.onloadend = async function (event) {
  output.textContent = '';
  const addressList = event.target.result.split("\n");
  for (const address of addressList) {
    await geocode(address);
  }
};

input.onchange = function() {
  if (this.files && this.files[0]) {
    reader.readAsBinaryString(this.files[0]);
  }
};
</script>
</body>
</html>

为什么这个方案管用？ #

• 严格顺序输出：await会让循环暂停，直到当前地址的请求处理完才会处理下一个，输出顺序和输入的地址列表完全一致。
• 异步不冻结：虽然是串行，但每个请求都是异步的，浏览器主线程不会被阻塞，用户还能正常操作页面。
• 超时可控：每个请求都有超时时间（默认5秒，你可以自己改），超时后会立刻触发错误处理，不会一直卡住。

这样就完美解决了你说的两难问题，不用再纠结顺序和冻结了！

内容的提问来源于stack exchange，提问作者Ralph Smorra