我有一个 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 提要中获取数据,如下所示
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"
您正在将数组传递给fetch()
而不是字符串或Request
对象。您可以使用 Promise
全部或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})
}
从问题中不清楚.done()
是什么,或者调用.done()
的预期结果是什么。
除了@guest271314应答之外,还将 setState 调用修改为
this.setState((prevState, props) => ({ data: [...prevState.data, this.extractData(responseData)] })
在早期的代码中,每次请求完成时都会覆盖数据数组。在上面的代码片段中,您可以看到它正在将新响应添加到上一个数组中。