Fetch请求在for循环中无法同步执行的技术求助

问题分析 #

你的代码存在几个关键问题，导致异步请求和循环无法同步：

• await 仅等待了 fetch 完成，但未等待 response.json() 的解析过程——嵌套的 .then() 使这部分异步操作脱离了 await 的控制范围。
• 循环变量 x 未用 let 声明，会成为全局变量，在异步场景下可能引发变量绑定错误。
• API 请求 URL 的参数分隔符错误：Unsplash API 要求参数用 & 分隔，你写的 ; 会导致请求无法被正确解析。

修正后的代码 #

将嵌套的 .then() 替换为 await，让整个异步流程都被 await 捕获，同时修复变量和 URL 问题：

async function myFunction() {
  // 用let声明循环变量，避免全局污染
  for (let x = 0; x <= c.length - 1; x++) {
    // 等待fetch完成，获取响应对象
    const response = await fetch(`https://api.unsplash.com/search/photos?client_id=123&query=${c[x].value}`);
    // 等待JSON解析完成，拿到数据
    const data = await response.json();
    
    // 此处处理data，现在会与循环同步执行
    console.log(`第${x+1}次请求结果:`, data);
  }
}

关键说明 #

• 用 await 替代链式 .then()，确保每个异步步骤按顺序完成，循环会等待当前请求的所有异步操作结束后，再进入下一次迭代。
• 用 let 声明循环变量 x，保证每次迭代的 x 都是独立绑定的，避免异步操作中变量值被意外覆盖。
• 修正 URL 参数分隔符为 &，确保 Unsplash API 能正确解析请求参数。

内容的提问来源于stack exchange，提问作者Andre S