HTTP and Fetch

Every time you load a page, the browser and a server talk to each other using HTTP — a simple language of requests and responses.

What is HTTP

HTTP is the protocol the browser uses to ask a server for resources: HTML, images, data. Watch the round trip:

name="http-request"

A request asks for something; a response sends it back. Together they’re called a round trip.

The fetch API

In JavaScript, fetch sends an HTTP request and gives you a Promise for the response.

fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data));

Reading a response

The response has a status (like 200 OK or 404 Not Found) and a body with the actual data.

const res = await fetch("https://api.example.com/data");
console.log(res.status);
const data = await res.json();
console.log(data);