Promises, async/await and fetch requests

Promises and async functions

A promise can be pending, fulfilled or rejected. An async function returns a promise. await suspends that function until the result is available; it does not itself block the whole browser. Heavy computation still needs performance consideration.

Checking HTTP status

fetch returns a promise for a Response. HTTP 404 and 500 do not automatically reject it. response.ok covers status codes 200–299. response.json() is another asynchronous operation and can fail on invalid JSON.

Local file example

Create datos.json with the shown content and serve both files from the same local HTTP server, rather than opening with file://. This example expects JSON and does not suit a bodyless 204 response.

// datos.json: {"message":"Library ready"}
async function loadMessage() {
  const response = await fetch("./datos.json");
  if (!response.ok) {
    throw new Error("HTTP " + response.status);
  }
  return response.json();
}
loadMessage()
  .then((data) => console.log(data.message))
  .catch((error) => console.error("Could not load:", error));

Requests to another origin

Browsers apply CORS to cross-origin requests. The destination server must allow the relevant access. mode: "no-cors" produces an opaque response rather than letting you read it freely. Check server documentation and configuration.

Check success and failure

1. Load the valid file and check the message.
2. Change the path to trigger a 404 and verify the error.
3. Introduce invalid JSON and observe the parsing failure.
4. In a real interface, provide understandable loading, success and error states.