HTTP, REST APIs, requests and responses

HTTP: the language of the web

The frontend and backend communicate using HTTP (HyperText Transfer Protocol). Every exchange is a request from the client followed by a response from the server.

A request contains:

• a method describing the action, such as GET or POST;
• a URL identifying the resource;
• headers with extra information, such as the content type or a session cookie;
• an optional body with data, usually JSON.

POST /api/students HTTP/1.1
Host: api.example.com
Content-Type: application/json

{"name": "Ravi Kumar", "email": "ravi@example.com"}

A response contains a status code, headers and usually a body:

HTTP/1.1 201 Created
Content-Type: application/json

{"id": 42, "name": "Ravi Kumar", "email": "ravi@example.com"}

Methods and CRUD

Most applications Create, Read, Update and Delete data (CRUD). HTTP methods map onto these actions:

GET requests must not change data, which lets browsers and caches repeat them safely.

Status codes

A 4xx code means the request needs fixing; a 5xx code means the server failed.

REST APIs and JSON

An API (Application Programming Interface) is a defined way for programs to talk to each other. A REST API organises data as resources identified by URLs and manipulated with the standard HTTP methods:

Data is exchanged as JSON (JavaScript Object Notation):

{
  "id": 7,
  "title": "Web Development Basics",
  "level": "Beginner",
  "lessons": 5,
  "free": true
}

JSON supports objects {}, arrays [], strings, numbers, booleans and null.

Calling an API from the frontend

Browsers provide fetch for HTTP requests:

async function loadCourses() {
  const response = await fetch("/api/courses");
  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }
  const courses = await response.json();
  console.log(courses.map((c) => c.title));
}

async function addStudent(name, email) {
  const response = await fetch("/api/students", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, email }),
  });
  return response.json();
}

await pauses the function until the network response arrives without freezing the page. Always check response.ok (true for 2xx statuses) before using the data.