JavaScript、抓取、API-有解無憂

我想做以下事情：從這個網站https://swapi.dev/api/people/獲取一個隨機名稱，我做到了，我可以在我的 html 頁面中看到它然后我還想獲得一個隨機星球，在這里我需要訪問 homeworld 密鑰，并回傳鏈接，然后回傳我格式化以獲得隨機 url 的鏈接，并且我還必須在我的頁面上顯示行星的名稱。第一次提取作業正常，至少我認為但第三個 .then() 不起作用，或者至少我不知道如何從 homeworld url 訪問資訊。這是我第一次嘗試 fetch()，如果你們能幫我告訴我在代碼中哪里做錯了，也許還有不同的解決方案，但不是那么復雜，那就太好了：D tnks

let randomNumber = Math.floor(Math.random()*9)


const fetchPromise = fetch("https://swapi.dev/api/people/");

let test
let test2
let planets = document.querySelector('#age')
fetchPromise
    .then((response) => {
        if (!response.ok) {
            throw new Error(`Http error: ${response.status}`);

        }
        return response.json();
    })
    .then((json) => {
        console.log(json.results[randomNumber].name)
        showRandomUserData(json)
        test = json.results[0].homeworld
        test = test.slice(0, -2)
        // console.log(test   randomNumber   "/");
        // console.log(test   "/"   randomNumber   "/");
        test = test   randomNumber   "/";
        return fetch(test)
        // return fetch("https://swapi.dev/api/planets/2/");
    })
    .then(response => response.json()).then(json =>
    {   test2=json.name
        console.log(test2);
        planets.innerHTML = test2
    }) 

showRandomUserData = (randomUser) => {
    document.querySelector("#name").innerHTML =
        randomUser.results[randomNumber].name;

}

解決了

uj5u.com熱心網友回復：

這是一個簡單的解決方案，用于fetch()從這兩個 URL 中獲取資料，然后將所有人和一個星球插入到您的網頁中：

function myFetch(...args) {
    return fetch(...args).then(response => {
        if (!response.ok) {
            throw new Error(`fetch failed with status ${response.status}`);
        }
        return response.json();
    });
}

Promise.all([
    myFetch("https://swapi.dev/api/people/"),
    myFetch("https://swapi.dev/api/planets/2/")
]).then(([people, planet]) => {
    const peopleDiv = document.getElementById("people");
    let peopleHTML = "";
    for (let p of people.results) {
        peopleHTML  = `<div>${p.name}</div>`;
    }
    peopleDiv.innerHTML = peopleHTML;
    
    const planetDiv = document.getElementById("planets");
    let planetHTML = `<div>${planet.name}</div>`;
    planetDiv.innerHTML = planetHTML;
}).catch(err => {
    console.log(err);
});

<div id="people"></div>
<hr>
<div id="planets"></div>

至于使用結果，人員 URL 回傳的結構如下所示：

{
  count: 82,
  next: 'https://swapi.dev/api/people/?page=2',
  previous: null,
  results: [
    {
      name: 'Luke Skywalker',
      height: '172',
      mass: '77',
      hair_color: 'blond',
      skin_color: 'fair',
      eye_color: 'blue',
      birth_year: '19BBY',
      gender: 'male',
      homeworld: 'https://swapi.dev/api/planets/1/',
      films: [Array],
      species: [],
      vehicles: [Array],
      starships: [Array],
      created: '2014-12-09T13:50:51.644000Z',
      edited: '2014-12-20T21:17:56.891000Z',
      url: 'https://swapi.dev/api/people/1/'
    },
    {
      name: 'C-3PO',
      height: '167',
      mass: '75',
      hair_color: 'n/a',
      skin_color: 'gold',
      eye_color: 'yellow',
      birth_year: '112BBY',
      gender: 'n/a',
      homeworld: 'https://swapi.dev/api/planets/1/',
      films: [Array],
      species: [Array],
      vehicles: [],
      starships: [],
      created: '2014-12-10T15:10:51.357000Z',
      edited: '2014-12-20T21:17:50.309000Z',
      url: 'https://swapi.dev/api/people/2/'
    }
}

所以，你有people.resultswhich 是一個陣列，你可以訪問people.results[n]以從該陣列中獲取一個專案。該專案將是一個具有 , 等屬性的.name物件.height...

您顯示的特定行星 URL 回傳一個單一的行星物件，如下所示：

{
  name: 'Alderaan',
  rotation_period: '24',
  orbital_period: '364',
  diameter: '12500',
  climate: 'temperate',
  gravity: '1 standard',
  terrain: 'grasslands, mountains',
  surface_water: '40',
  population: '2000000000',
  residents: [
    'https://swapi.dev/api/people/5/',
    'https://swapi.dev/api/people/68/',
    'https://swapi.dev/api/people/81/'
  ],
  films: [
    'https://swapi.dev/api/films/1/',
    'https://swapi.dev/api/films/6/'
  ],
  created: '2014-12-10T11:35:48.479000Z',
  edited: '2014-12-20T20:58:18.420000Z',
  url: 'https://swapi.dev/api/planets/2/'
}

因此，您可以訪問該物件的屬性，如planet.name.

請注意，人員結果是分頁的。總共有 82 個結果，但第一個結果中只有 10 個。其余的帶有其他頁面的結果，例如https://swapi.dev/api/people/?page=2.

uj5u.com熱心網友回復：

與此答案類似，但使用 async/await 來避免回呼地獄。如果可以，請嘗試使用這種方法。為什么？

jfriend00在該答案中的出色建議是使用Promise.all而不是單獨的 fetch 呼叫，因為這樣可以并行進行獲取。要了解更多。

沙箱測驗和嘗試

const fetchData = async (...args) => {
  try {
    const response = await fetch(...args);
    return response.json();
  } catch (err) {
    throw new Error(`fetch failed with status ${err?.message}`);
  }
};

const updateDOM = (people, planet) => {
  document.getElementById("people").innerHTML = 
   people.results.reduce((s, p) => s   `<div>${p.name}</div>`, "");
  document.getElementById("planets").innerHTML = `<div>${planet.name}</div>`;
};

const populateData = async () => {
  try {
    const [people, planet] = await Promise.all([
      fetchData("https://swapi.dev/api/people/"),
      fetchData("https://swapi.dev/api/planets/2/"),
    ]);

    // do stuff with 'people' or 'planet'
    // example, get
    // const firstPersonsHomeworld = people.results[0].homeworld;
    // console.log(firstPersonsHomeworld);
    // or
    // const planetName = planet.name;
    // console.log(planetName);

    updateDOM(people, planet);
  } catch (err) {
    // errorHandler(err);
    console.error(err);
  }
};

// start app
populateData();

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492935.html

標籤：javascript json api 拿来 es6-承诺

上一篇：如何用js填充選擇選項？

下一篇：變數的值無故改變