如何從多個URL提取數據並將其保存在數組中（反應本機）

Question

我有一個RSS URL數組，我想從中獲取數據並將其保存在一個數組中。 這是我的代碼：

// rss urls array
var URLS = [
  "https://www.wired.com/feed/rss",
  "http://feeds.bbci.co.uk/news/rss.xml",
  "http://www.nasa.gov/rss/dyn/breaking_news.rss"
];

我的狀態中有一個數據變量，我想存儲數據

constructor() {
    super()
    this.state = {
      data: []
    }
  }

我使用fetchData()函數嘗試獲取數據

  fetchData() {
    var urlArray = [];

    for (var i = 0; i < URLS.length; i++) {
      urlArray.push(URLS[i]);
    }

    fetch(urlArray)
      .then((response) => response.text())
      .then((responseData) => {
        this.setState({
          data: this.extractData(responseData)
        });
      }).done();
  }


  componentDidMount() {
    this.fetchData();
  }

我這樣使用extractData函數從rss feed中獲取數據

  extractData(text) {
    var doc = new DOMParser().parseFromString(text, 'text/xml');
    var items_array = [];
    var items = doc.getElementsByTagName('item');

    for (var i = 0; i < items.length; i++) {
      items_array.push({
        title: items[i].getElementsByTagName('title')[0].lastChild.data,
        description: items[i].getElementsByTagName('description')[0].lastChild.data,
        //thumbnail: items[i].getElementsByTagName('enclosure')[0].getAttribute('url'),
        //link: items[i].getElementsByTagName('link')[0].textContent,
        //date: items[i].getElementsByTagName('pubDate')[0].textContent,                    
      })
    }
    return items_array;
  }

但是，當我運行時，我收到一條錯誤消息：“無法加載空URL”

Answer 1

您正在將數組而不是字符串或Request對象傳遞給fetch() 。 您可以使用Promise all或async/await和一個循環來對fetch()進行多次調用，並在所有請求完成時獲取結果，如果其他任何請求均引發錯誤，則記錄錯誤。 您還可以處理錯誤並繼續循環以獲取成功的請求和錯誤消息。

  fetchData() {    
    return Promise.all(
      URLS.map(url => 
        fetch(url)
        .then(response => response.text())
        .then(responseData => {
          this.setState({
            data: this.extractData(responseData)
          })
        })
        .catch(err => /* handle errors here */ console.error(err))
      )
    ).then(() => {// do stuff}, err => {// handle error})
  }

從Question尚不清楚.done()是什么，還是調用.done()的預期結果是什么。

Answer 2

除了@ guest271314答案外，將setState調用修改為

this.setState((prevState, props) => ({ data: [...prevState.data, this.extractData(responseData)] })

在您之前的代碼中，每次請求完成時，您都將覆蓋數據數組。 在上面的代碼片段中，您可以看到它正在將新的響應添加到先前的數組中。