首頁猿問 JavaScript Fetch...

JavaScript Fetch & Push Array 返回 “undefined”

JavaScript

慕桂英3389331 2022-08-18 15:39:51

我正在用普通的javascript編寫一個應用程序。我遇到了一個問題，在將150個對象放入數組時，數組中的某些對象未定義。當我控制臺.log對象之前將它們推入數組之前，它們很好，并且所有150個對象都顯示出來。但是，當我將它們推送到陣列時，有些是未定義的，有些確實被成功推送。我的理解是，這可能是一個序列問題的時間問題，對于某些對象，它們可能尚未完全獲取，但推送到數組已經發生。有沒有辦法確保它們被排序，以便數組僅在完全成功獲取對象后才被推送？感謝您的幫助。const fetchPokemon = function () { const pokemons = []; for ( let i=1; i <= 150; i++) { const url = `https://pokeapi.co/api/v2/pokemon/${i}`; fetch(url).then( res => { return res.json(); }) .then( data => { const pokemon = { name: data.name, id: data.id }; pokemons.push(pokemon); console.log(pokemon); console.log(pokemons[i]); }); }};fetchPokemon();輸出 - 根據未定義的數組元素，頁面的不同重新加載而變化app.js:17 undefinedapp.js:16 {name: "dragonite", id: 149}app.js:17 undefinedapp.js:16 {name: "mewtwo", id: 150}app.js:17 undefinedapp.js:16 {name: "kingler", id: 99}app.js:17 {name: "electrode", id: 101}app.js:16 {name: "aerodactyl", id: 142}app.js:17 {name: "zapdos", id: 145}app.js:16 {name: "dratini", id: 147}app.js:17 {name: "kingler", id: 99}

查看完整描述

2 回答

慕尼黑8549860

TA貢獻1818條經驗獲得超11個贊

您的問題是，雖然每個單獨的請求都是異步的，但您在所有 150 個請求完成之前都會返回。在下面的 for 循環中，不是鏈接到請求并立即推送，而是將 promise 推送到數組中。然后，在循環之后，返回一個 Promise，一旦請求了所有 150 個 Promise 并將其推送到數組中，該 Promise 就會解析。fetchrequestspokemons

const fetchPokemon = function() {

const pokemons = [];

const requests = [];

for (let i = 1; i <= 150; i++) {

const url = `https://pokeapi.co/api/v2/pokemon/${i}`;

const prom = fetch(url).then((r) => r.json());

requests.push(prom);

}

return new Promise((resolve) => {

Promise.all(requests)

.then((proms) =>

proms.forEach((p) => pokemons.push({

name: p.name,

id: p.id

}))

)

.then(() => resolve(pokemons));

});

};

fetchPokemon().then(console.log);

反對回復 2022-08-18

海綿寶寶撒

TA貢獻1809條經驗獲得超8個贊

在這里發布這個，作為一個更簡單，更簡潔和最好的例子使用異步/等待。

并行 fetch，具有迭代第一個順序就緒 fetch 響應的功能。即：如果前 25 個 fetch 完成，它將按順序迭代前 25 個，而無需等待后一個 125。

const fetchPokemon = async function() {

const pokemons = [];

for (let i = 1; i <= 150; i++) {

const url = `https://pokeapi.co/api/v2/pokemon/${i}`;

const data = fetch(url).then(res => res.json())

.then( ({name, id}) => ({name, id}) );

pokemons.push(data);

}

for await (const pokemon of pokemons) {

console.log(pokemon);

}

// or if you need to use the index:

for (let i = 0; i < pokemons.length; i++) {

console.log(await pokemon[i]);

}

};

fetchPokemon();

反對回復 2022-08-18

2 回答
0 關注
154 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

JavaScript Fetch & Push Array 返回 “undefined”

JavaScript Fetch & Push Array 返回 “undefined”

2 回答

添加回答