javascript - YouTube API 返回的数据似乎是不可变的？

Question

 onSearch = async () => {
    const query = qs.stringify({ ...API_QUERY_PARAMS, q: this.state.searchString });
    const url = `https://www.googleapis.com/youtube/v3/search?${query}`
    
    const { data } = await axios.get(url);
    
    data.items.forEach(async vid => {
      let id = vid.id.videoId; //Individual video ID
      const individualQuery = qs.stringify({ ...INDIVIDUAL_API_QUERY_PARAMS, id  });
      const individualURL = `https://www.googleapis.com/youtube/v3/videos?${individualQuery}`;
      
      const { data } = await axios.get(individualURL);
      //data.items[0].statistics does give me the object that I want
      vid['statistics'] = data.items[0].statistics
    })
    
    this.setState({ videos: data.items });
    console.log(this.state.videos);
  }

基本上上面的onSearch 方法将调用YouTube API 并在data.items 中返回一个视频列表

对于每个video/item，它们都缺少statistics，所以我再次调用来检索数据，数据成功返回为data.items[0].statistics，然后我想将其作为属性附加到单个项目中。

没有抛出异常，但是我也没有看到新创建的 statistics 属性。这个想法就像下面的一个非常简单的形式。

let items = [
  {id: '123', title: 'John'},
  {id: '123', title:'sammy'}
]

items.forEach(x=> {
	x['statistics'] = { propA: 'A', propB: 'B'};
})

console.log(items);

Answer 1

将 async 函数放在 forEach 中不会暂停外线程，直到所有迭代都完成 - 你需要 Promise.all将每个异步迭代映射到一个Promise并等待每个Promise在继续之前得到解决:

const query = qs.stringify({ ...API_QUERY_PARAMS, q: this.state.searchString });
const url = `https://www.googleapis.com/youtube/v3/search?${query}`

const { data } = await axios.get(url);

await Promise.all(data.items.map(async (vid) => {
  let id = vid.id.videoId; //Individual video ID
  const individualQuery = qs.stringify({ ...INDIVIDUAL_API_QUERY_PARAMS, id  });
  const individualURL = `https://www.googleapis.com/youtube/v3/videos?${individualQuery}`;
  const { data } = await axios.get(individualURL);
  vid.statistics = data.items[0].statistics
}))

this.setState({ videos: data.items });