main.js — asinchroninis įkėlimas

Dabar panaudokim api.js. Kodo stulpelyje — atnaujintas main.js: 1 pamokos vietaženklis virsta tikru asinchroniniu įkėlimu. Parodom „Loading…", laukiam tinklo, tada — rezultatą arba klaidą.

Trys būsenos jau čia, nors dar primityvios:

Kraunama: app.textContent = 'Loading…' prieš await.
Pavyko: parodom, kiek nuotraukų gavom ir naujausios pavadinimą.
Klaida: try/catch pagauna ir tinklo lūžį, ir mūsų throw dėl !response.ok.

async function load() {
  app.textContent = 'Loading space pictures…';
  try {
    const pictures = await fetchPictures(14);
    app.textContent = `Loaded ${pictures.length} pictures. Newest: ${pictures[0].title}`;
  } catch (error) {
    app.textContent = `Could not load: ${error.message}`;
  }
}
load();

Patikrink. Serviruok (python -m http.server) ir atidaryk. Turi pamatyti:

Trumpai:  Loading space pictures…
Tada:     Loaded 14 pictures. Newest: <šiandienos APOD pavadinimas>

Spąstai (DEMO_KEY riba). Kelis kartus greitai perkrauk puslapį. Anksčiau ar vėliau vietoj nuotraukų pamatysi:
Could not load: The API returned 429
429 Too Many Requests — DEMO_KEY kvota (~30/val.) išnaudota. (NASA kartais grąžina ir 403 su „rate limit" tekstu.) Tai ne tavo kodo klaida — tai bendro rakto riba. Sprendimas — savas raktas (namų darbe). O 6 pamokoje šią klaidą paversim aiškia žinute su „Retry" mygtuku, ne šiurkščiu „429".

main.js MODIFIKUOTI 16 eilučių pakeista

Redaguok šį failą kataloge js/

// The entry point now FETCHES real data. Lesson 1's placeholder becomes a real
// async load: show "Loading…", await the network, then show a result or an error.

import { fetchPictures } from './api.js';

const app = document.getElementById('app');

async function load() {
  app.textContent = 'Loading space pictures…';
  try {
    const pictures = await fetchPictures(14);          // last 14 days
    app.textContent =
      `Loaded ${pictures.length} pictures. Newest: ${pictures[0].title}`;
  } catch (error) {
    // Network failure OR a non-ok status both land here.
    app.textContent = `Could not load: ${error.message}`;
  }
}

load();