HTTP primer for frontend developers 
Tags: frontend, http
Published: 2020-12-27 16:51:03


---
title: HTTP primer for frontend developers 
published: true
description: HTTP  —  Hypertext Transfer Protocol  —  is how client and server (frontend and backend) talk to each other. As frontend developers (and web developers in general) we should understand at least the basics of this communication, because an important part of our job is to send requests to the server and handle the responses. Request [&hellip;]
tags: frontend, http
canonical_url: https://www.webdevdrops.com/en/http-primer-for-frontend-developers-f091a2070637/
cover_image: https://www.webdevdrops.com/wp-content/uploads/2017/08/http.jpg
---

**HTTP** — Hypertext Transfer Protocol — is how client and server (frontend and backend) talk to each other. As frontend developers (and web developers in general) we should understand at least the basics of this communication, because an important part of our job is to send *requests* to the server and handle the *responses*.

Request and response
--------------------

Basically the way that communication works is by exchanging messages. The client sends a *request* and the server sends back a *response*.

![](https://webdevdrops.com/wp-content/uploads/2017/08/http-1-1024x648.png)Anatomy of a request
--------------------

An HTTP request is composed of the following parts:

![](https://webdevdrops.com/wp-content/uploads/2017/08/http-2-1024x484.png)

### **Method**

Also referred as *verb*, is the kind of action to be performed (GET information, POST information back to the server, etc). The most common are:

- **GET**
  Retrieve information from the server. For example: a webpage, an image file.
- **POST**
  Send data to the server. For example: a filled registration form.
- **PUT**
  Send data to completely replace an existing resource.
- **PATCH**
  Send data to apply partial modifications to a resource.
- **DELETE**
  Delete the specific resource from the server.

### **URI**

Uniform Resource Identifier — is the path on the server that identify the information (the *resource* to be fetched, created, modified).

### **Header**

Additional information about the request and about the client, in the form of key-value pairs.

### **Body**

Optional. The content the client sends to the server. GET and DELETE requests usually don’t need one. For POST, PUT and PATCH requests this is where the information to be created or modified is sent.

Anatomy of a response
---------------------

An HTTP response is composed of the following parts:

![](https://webdevdrops.com/wp-content/uploads/2017/08/http-3-1024x499.png)

### Status

Indicates, by a numeric code, whether a request has been successfully completed. They are grouped in five classes, identified by the first digit. Some of the most used statuses are:

- **1xx — Information**
- **2xx — Success
  200 OK**: The request was completed successfully.
- **3xx — Redirect**
  **301 Moved Permanently**: The resource is permanently located in a different URI. A new URI should be given in the response.
  **302 Found**: The resource temporarily moved to a new location.
- **4xx — Client error**
  **400 Bad Request**: The request could not be understood by the server.
  **403 Forbidden**: User not authorized to perform the requested operation.
  **404 Not Found**: The requested resource could not be found at the given URI.
  **405 Method Not Allowed**: The request method is not allowed on the specified resource.
- **5xx — Server error**
  **500 Internal Server Error**: The server encountered an unexpected condition, preventing it to fulfill the request.
  **503 Service Unavailable**: The server is temporarily unavailable, usually due to overloading or maintenance.

For a more comprehensive list: 
<http://www.restapitutorial.com/httpstatuscodes.html>

### Header

Like the request header, this contains additional information about the server and about the response itself.

### Body

Optional. This is the content returned by the server.

Practical examples: HTTP requests with JavaScript
-------------------------------------------------

See some examples of how to send HTTP requests on the frontend and how to handle responses.

**Example #1**: GET information about the latest React release on GitHub

```javascript
// the request:
// GET information about the latest React release on GitHub
// we don't need to inform the method (GET is the default), 
//   headers or body (GET request doesn't need one)
fetch('https://api.github.com/repos/facebook/react/releases/latest') // the URI
  .then(response => {
    // we received the response and print the status code
    console.log(response.status)
    // return response body as JSON
    return response.json()
  })
  .then(json => {
    // print the JSON
    console.log(json)
  })

// on success will log:
// 200
// { ... contents of the response body as JSON ... }
```


**Example #2**: POST a new email to be associated to my GitHub account

```javascript
// the request:
// POST a new email address to my GitHub account
fetch('https://api.github.com/user/emails', { // the URI
  method: 'POST', // the method
  body: JSON.stringify(["octocat@github.com"]) // the body
})
  .then(response => {
    // we received the response and print the status code
    console.log(response.status)
    // return response body as JSON
    return response.json()
  })
  .then(json => {
    // print the JSON
    console.log(json)
  })

// on success will log:
// 201
// { ... contents of the response body as JSON ... }
```


**Example #3**: Handling a failed request (status code different than 2xx)

```javascript
// the request:
// try to GET an nonexistent URI
fetch('https://api.github.com/nonexistent-uri')
  .then(response => {
    if (response.ok) {
      // we should not reach here
      console.log('success')
    } else {
      console.log(response.status)
    }
  })

// will log:
// 404
```


Additional resources
--------------------

- <https://developer.mozilla.org/en-US/docs/Web/HTTP>
- [https://wikipedia.org/wiki/Hypertext\_Transfer\_Protocol](https://wikipedia.org/wiki/Hypertext_Transfer_Protocol)
- <https://www.tutorialspoint.com/http/index.htm>
- [https://developer.mozilla.org/en/docs/Web/API/Fetch\_API](https://developer.mozilla.org/en/docs/Web/API/Fetch_API)

Feedback? Suggestions?