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

Question

在我开始之前，让我说我是 Javascript 的新手，也是 axios API 调用的新手，所以我可能犯了一个新手错误...

我有这个函数 getObjects()，它用于映射数组和 return 来自 Axios API 调用的数据。 API 调用和映射函数都在工作，但我得到的是一个 Promise 对象，而不是我试图获取的数据。

我认为这是因为数据在没有足够的时间实际获取之前就已 returned，但不确定如何修复？我尝试了 .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);
  }

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

Here's a link to a codepen with the issue - 打开控制台查看问题。这是一个 React 项目，但我认为 React 的任何东西都不是问题所在。 编辑： Codepen link 使用 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

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

Axios API call returning Promise object instead of result?

javascript

reactjs

axios