您好,我是Java语言和API的新手。
但我有一个练习,应该从中获取数据。
https://swapi.co/api/planets/
问题在于,它不会一次列出所有行星,因此URL仅显示前10个条目,而https://swapi.co/api/planets/?page=2显示下一个条目,依此类推。
这是我当前的代码,它可以正常工作,但是我不认为我应该这样做,所以我想知道您将如何解决这个问题。
https://codepen.io/indiehjaerta/pen/QQXVJX
var starWarsAPI = new StarWarsAPI();
starWarsAPI.Initialize();
function StarWarsAPI()
{
this.planets = new Array();
this.Initialize = function()
{
this.LoadPlanets("https://swapi.co/api/planets");
}
this.LoadPlanets = function(aURL)
{
fetch(aURL).then(
function (response)
{
if (response.status !== 200)
{
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
response.json().then(
data => this.LoadPlanetsRecursive(data)
);
}.bind(this)
).catch(function (err)
{
console.log('Fetch Error :-S', err);
});
}
this.LoadPlanetsRecursive = function(aData)
{
for (let planet of aData.results)
{
let newPlanet = new Planet(planet);
this.planets.push(newPlanet);
}
if (aData.next != null)
{
fetch(aData.next).then(
function (response)
{
if (response.status !== 200)
{
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
response.json().then(
data => this.LoadPlanetsRecursive(data)
);
}.bind(this)
).catch(function (err)
{
console.log('Fetch Error :-S', err);
});
}
}
this.PresentPlanetsInHTML = function()
{
}
}
function Planet(aPlanet)
{
this.name = aPlanet.name;
console.log(this);
}
第二个问题是我应该将“PresentData”放在哪里,这样我就知道所有行星都已加载,而不是将其添加到数组中时是不是1比1加载。
最佳答案
您可以递归地创建一个 promise 解决链。重复的次数少了一点,您会知道当父 promise 解决时所有行星都加载完毕。
function getStarWarsPlanets(progress, url = 'https://swapi.co/api/planets', planets = []) {
return new Promise((resolve, reject) => fetch(url)
.then(response => {
if (response.status !== 200) {
throw `${response.status}: ${response.statusText}`;
}
response.json().then(data => {
planets = planets.concat(data.results);
if(data.next) {
progress && progress(planets);
getStarWarsPlanets(progress, data.next, planets).then(resolve).catch(reject)
} else {
resolve(planets);
}
}).catch(reject);
}).catch(reject));
}
function progressCallback(planets) {
// render progress
console.log(`${planets.length} loaded`);
}
getStarWarsPlanets(progressCallback)
.then(planets => {
// all planets have been loaded
console.log(planets.map(p => p.name))
})
.catch(console.error);
关于javascript - 使用Fetch和分页的Javascript,是否递归?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49129245/