javascript - 对象键迭代问题

Question

我对这个 API 调用感到惊奇，我将其导出并保存为 React 中的状态。

 avengers.map((avenger, index) => {
  const url = `
    http://gateway.marvel.com/v1/public/characters/${avenger}?ts=${ts}&apikey=${publicKey}&hash=${hash}
  `
  fetchMarvelData(url, index)
})

let fetchedData = {}

async function fetchMarvelData (url, index) {
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
  const data = await response.json()
  fetchedData[`avenger${index}`] = data.data.results[0]
}

export default fetchedData

当我尝试迭代 Object.keys(fetchedData) 时，我得到一个空数组。不太确定这里出了什么问题，感谢您的帮助。

React state log

编辑:阐明了我要迭代的内容。

编辑:添加了 React 状态 console.log 的图像

Answer 1

那是因为您正在导出一个空对象。由于您正在执行不await 的异步调用，因此 fetchedData 在导出时将只是一个空对象。

如果你想让所有的请求都提前完成，你可以这样做:

const hash         = '...'; // Replace
const ts           = '...'; // Replace
const publicKey    = '...'; // Replace
const fetchOptions = {
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
};

const fetchAvenger = async avenger => {
  const url      = `http://gateway.marvel.com/v1/public/characters/${avenger}?ts=${ts}&apikey=${publicKey}&hash=${hash}`;
  const response = await fetch(url, fetchOptions);
  const data     = await response.json();

  return data.data.results[0];
};

const fetchAvengers = async avengers => {
  const remoteAvengers = [];
  await Promise.all(avengers.map(async avenger => {
    const remoteAvenger = await fetchAvenger(avenger);
    remoteAvengers.push(remoteAvenger);
  }));
  return remoteAvengers;
};

export default fetchAvengers;

然后在您的组件中，您可以像这样添加复仇者联盟:

import fetchAvengers from 'path/to/fetchAvengers';
// ...

// Show a loader or something?
this.setState({ isFetchingAvengers: true });

// Waits for all avengers to be fetched from api
const avengers = await fetchAvengers([...]);

// Update state, hide loader
this.setState({ avengers, isFetchingAvengers: false });

我还没有测试过代码，因此其中可能存在一些错误，请告诉我，我会尽力提供帮助。