JavaScript中fetch返回的response无法存入字典是什么原因？

API 探路者

2026-9-29

问题原因

异步执行时序问题：fetch 是异步非阻塞 API，代码执行到 fetch 时只会把请求任务塞入事件队列，不会等待请求返回就会继续执行后续的同步代码。你在循环内同步打印 recipeData[recipes[i]]、循环结束后直接判断长度时，所有 fetch 请求都还未返回响应，对应字段自然是 undefined。
Promise 赋值错误：response.json() 本身返回的是一个 Promise 实例，你没有等待该 Promise 完成解析就直接赋值，哪怕请求结束，你存入字典的也不是接口返回的实际数据，而是未完成解析的 Promise 对象，无法直接读取到对应值。
长度判断逻辑错误：你用普通对象（字典）存储数据，JS 中普通对象没有原生的 length 属性，recipeData.length 永远返回 undefined，不可能和 recipes.length 相等，该判断逻辑永远不会走到 resolve 分支。

修复方案

推荐用 Promise.all 批量处理并行异步请求，示例代码如下：

Promise.all(
  recipes.map(async (apiUrl) => {
    try {
      const res = await fetch(apiUrl);
      // 等待JSON解析完成再返回
      const resData = await res.json();
      return { apiUrl, resData };
    } catch (err) {
      console.error('Something went wrong fetching API', err);
      throw err;
    }
  })
).then(fetchResults => {
  // 所有请求全部成功后再统一给recipeData赋值
  fetchResults.forEach(({apiUrl, resData}) => {
    recipeData[apiUrl] = resData;
  });
  resolve(true);
}).catch(() => {
  reject('Could not fetch recipes');
});

该方案优势：