Replace Local Data with fetch()

Keep the application model, change the source

Until now, a JavaScript array supplied the resources immediately. Move the same records to data/resources.json and load them through HTTP.

The important change is time. A local array already exists when the script runs. A requested file must travel from a source to the browser, so the result arrives later.

Before reading the code, remember this story:

Ask for the file
-> wait without freezing the whole page
-> receive a response
-> check the response
-> convert JSON text into JavaScript values
-> return those values

async function fetchResources() {
  const response = await fetch('/data/resources.json');

  if (!response.ok) {
    throw new Error(`Unable to load resources (${response.status})`);
  }

  const data = await response.json();

  if (!Array.isArray(data)) {
    throw new Error('Resources must be an array');
  }

  return data;
}

fetch() starts an HTTP request and returns a Promise. response.ok checks whether the HTTP status represents success. response.json() reads and parses the response body. A successful HTTP status still does not prove that the parsed value has the expected shape.

A Promise is not the final array. It represents work whose result will be known later. await lets the current async function continue only after that result is available.

Connect loading to initialization

async function init() {
  connectEvents();
  state.items = await fetchResources();
  render();
}

init();

state.items starts as [] because the response is not available yet. After the Promise fulfills and validation succeeds, the assignment replaces that empty collection with the loaded records. Rendering then reads the new state.

request
   |
   v
Promise
   |
   v
await response
   |
   v
parse JSON
   |
   v
JavaScript objects
   |
   v
state.items
   |
   v
render()

What await actually pauses

await pauses the current async function until the Promise settles. It does not freeze the whole browser. The browser can still paint, receive input and run other eligible tasks. Long synchronous JavaScript can still block the page, so await is not a general solution to heavy computation.

Static JSON and a backend are not identical

Loading a JSON file uses an HTTP request, but a static file does not execute business logic. A backend API can authenticate a user, validate rules, read a database and construct a response. The frontend contract remains a request followed by a response, but the server's responsibility is different.

Predict the order

console.log('A');
const promise = fetchResources();
console.log('B');
const items = await promise;
console.log('C');

A and B appear before C. Starting a Promise does not make the following synchronous statement wait. The await controls when the current async function continues.

Stop and explain

Complete these sentences before continuing:

• fetch() gives me a ...
• await pauses ...
• response.ok tells me ...
• response.json() converts ...
• after validation, the items go into ...

What to remember

External data arrives later. Start with an honest initial state, await and validate the response, place valid objects into state, then render from that state.