Axios API调用返回Promise对象而不是结果？

Question

在开始之前，请允许我说我是Javascript的新手，并且对axios API调用很新，所以我可能会犯一个菜鸟错误......

我有这个函数getObjects() ，它意味着映射数组并从Axios API调用返回数据。 API调用和map函数都正常工作，但我得到的是Promise对象而不是我想要的数据。

我认为这是因为在有足够的时间实际获取数据之前返回数据，但不确定如何修复？ 我尝试了.setTimeout() ，但这似乎不起作用。

  getObjects() {
    let newsItems = this.state.arrayofids.map((index) => {
      let resultOfIndex = axios.get(`https:\/\/hacker-news.firebaseio.com/v0/item/${index}.json`).then((res) => {
          let data = res.data;
          //console.log(data.by); // this prints the correct byline, but
                              // all the bylines are printed after
                              // the console.log below...
          if (!data.hasOwnProperty('text')) return data;
        }); /// end of axios request
  return resultOfIndex;
    }); /// end of map
    /// ideally this would end in an array of response objects but instead i'm getting an array of promises...
    console.log(newsItems);
  }

（额外的转义字符是我的文本编辑器的好处。）

这是一个带有问题的codepen的链接 - 打开控制台以查看问题。 这是一个React项目，但我不认为任何React的东西都是问题。 编辑： Codepen是使用axios.all链接到工作解决方案，如下所示

谢谢！

编辑：这是我的工作解决方案。

getObjects() {
  let axiosArr = [];
  axios.all(this.state.arrayofids.map((id) => {
      return axios.get(`https:\/\/hacker-news.firebaseio.com/v0/item/${id}.json`)
    })).then((res) => {
      for (let i = 0; i < this.state.arrayofids.length; i++) {
        axiosArr.push(<li key={i} data-url={res[i].data.url} onClick={(e) => this.displayTheNews(e)}>{res[i].data.title}</li>);
      }
      if (axiosArr.length == this.state.arrayofids.length) {
        this.setState({arrayofdata: axiosArr});
        console.log('state is set!');
      }
    })
 }

Answer 1

axios.all函数应该更适合您当前的场景。

Answer 2

您的console.log正在立即执行，而不是等待请求完成，因为它们不是同步的。 您必须在console.log之前等待所有响应。

选项1 （困难的方法）：用你的console.log替换

newsItems.forEach((promise, index) => {
  promise.then((object)=>{
    newsItems[index] = object
    if (index+1 == newsItems.length) {
      console.log(newsItems)
    }
  })
})

选项2 （更好的方法）：使用axios.all

  getObjects() {
    axios.all(this.state.arrayofids.map((id) => {
      return axios.get(`https:\/\/hacker-news.firebaseio.com/v0/item/${id}.json`)
    })).then((res) => {
      console.log(res)
    })
  }

顺便说一句，我肯定会推荐改变

this.state.arrayofids.map((index) => {
      let resultOfIndex = axios.get(`https:\/\/hacker-news.firebaseio.com/v0/item/${index}.json`)...

被称为id而不是index