以下是我的代碼
let url;
let planetCount;
let planetData = [];
//turn through the pages[/span]。
for (let p = 1; p < 7; p ) {
url = `https://swapi.boom.dev/api/planets?page=${p}`。
//fetch data; //fetch data.
for (let j = 0; j < 1; j ) {
fetch(url).then(res => res.json()
.then(data => {
//push data to array
for (let i = 0; i < data.results.length; i ) {
planetData.push(data.results[i]) 。
}
})
console.log(planetData)
}
}
下面是輸出結果： https://i.stack.imgur.com/Hivwr.png
問題：我怎樣才能讓它全部進入一個陣列，而不是6個？
uj5u.com熱心網友回復：
你確實只有一個陣列。你只是得到了六次輸出，因為你在一個回圈中運行console.log()。
let url;
let planetCount;
let planetData = [] []
let promises = [] 。
//turn through the pages[/span]。
for (let p = 1; p < 7; p ) {
url = `https://swapi.boom.dev/api/planets?page=${p}`。
//fetch data; //fetch data.
for (let j = 0; j < 1; j ) {
promises.push（fetch（url）。 then(res => res.json()
.then(data => {
//push data to array
for (let i = 0; i < data.results.length; i ) {
planetData = planetData.concat(data.results[i]) 。
}
}));
}
}
Promise.all(promises)
.then(() => {
console.log(planetData.length, '=> ', planetData) 。
})uj5u.com熱心網友回復：
你可以使用async/await和Promise.all()來回傳一個回傳頁面的陣列。一旦我們有了這個，我們就可以使用Array.flat()來創建一個行星資料的連續陣列：
async function getPlanets（）{
const urls = Array.from( { length。7 }, (v,i) =>/span> `https://swapi. boom.dev/api/planets?page=${i 1}` ) 。
const promises = urls.map(url => fetch(url) 。 then(res => res.json()) 。 then(data => data.results) ）。)
const planetData = (await Promise.all(promises)).flat() 。
console.log(`Results for ${planetData.length} planets downloaded.`)。
console.log('Results:'/span>, planetData)。
}
getPlanets()uj5u.com熱心網友回復：
這是否回答了你的問題？如何用Promise.all來獲取一個陣列的URL？
Promise all應該是 "一個陣列"。
Promise all應該是適合你使用的工具，這樣你就可以等到所有的承諾都解決后再去處理回應
uj5u.com熱心網友回復：這個問題與異步代碼的作業原理有關。
fetch()函式最終將回傳一個結果，但是在你試圖記錄它的時候，這個結果還沒有出現。
您必須等待結果被檢索出來。
。async function turnThroughThePges() {
let url;
let planetCount;
let planetData = [];
//turn through the pages[/span]。
for (let p = 1; p < 7; p ) {
url = `https://swapi.boom.dev/api/planets?page=${p}`。
//fetch data; //fetch data.
for (let j = 0; j < 1; j ) {
await fetch（url）。 then(res => res.json()
.then(data => {
for (let i = 0; i < data.results.length; i ) {
planetData.push(data.results[i]) 。
}
})
}
}
return planetData。
}
turnThroughThePges().then(console.log) ; uj5u.com熱心網友回復：
async function requests（）{
let url;
let planetCount;
let planetData = [];
//turn through the pages[/span]。
for (let p = 1; p < 7; p ) {
url = `https://swapi.boom.dev/api/planets?page=${p}`。
//fetch data; //fetch data.
await fetch（url）。 then(res => res.json()
.then(data => {
for (let i = 0; i < data.results.length; i ) {
planetData.push(data.results[i]) 。
}
})
}
return planetData。
}
requests（）.then（console.log）。
//無用回圈 for (let j = 0; j < 1; j )
uj5u.com熱心網友回復：
。let url;
let promises = [];
//翻閱各頁
for (let p = 1; p < 7; p ) {
url = `https://swapi.boom.dev/api/planets?page=${p}`。
//獲取資料
promises.push(
fetch(url)
.then((res) => res.json())
.then((data) => data.results)
);
}
函式 handleRejection(p) {
return p.catch((err) => ({ error: err }))。
}
async函式request() {
return await Promise.all(promises.map(handleRejection))。
}
requests().then((planetData) => console.log(planetData.flat()));轉載請註明出處，本文鏈接：https://www.uj5u.com/net/312348.html
標籤：