Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Important HTTP request and response headers
  • Request Method
  • Response Status Code
  • How to send requests
  • JavaScript
  • Thunder Client
  1. 2: Full Stack
  2. 2.1: Internet 101

2.1.2: HTTP Requests and Responses

Previous2.1.1: Chrome DevTools Network PanelNext2.2: Advanced React

Last updated 1 year ago

Learning Objectives

  1. HTTP requests are instructions to manage data on a remote server; HTTP responses are acknowledgments from the server

  2. What to pay attention to in HTTP requests and responses

  3. How to send HTTP requests via JavaScript and Thunder Client

Introduction

HTTP "requests" are instructions sent over the internet to create, retrieve, update or delete data. HTTP "responses" are acknowledgments of HTTP requests, containing information describing the status of the request and containing any relevant data. Libraries like Firebase wrap HTTP requests and responses in their library functions, but most data sources do not have libraries like Firebase and we will need to explicitly send HTTP requests to access those data sources.

We must assume it will take an indefinite amount of time to receive a response for an HTTP request, and use JavaScript promises or callbacks (promises preferred) to write logic that is dependent on the response. This is because our requests often must literally travel across the world and internet connectivity can be unstable.

Important HTTP request and response headers

HTTP request and response headers are key-value pairs that store metadata for requests and responses. There are many kinds of request and response headers, and for our purposes we will pay attention to the request method and status code headers.

Request Method

The communicates the kind of action we are requesting. The 4 most common methods are GET, POST, PUT, and DELETE, of which GET and POST are the most common.

Method
Purpose
Notes

GET

Retrieve data

GET is default and most common method. We trigger GET requests when we enter URLs in the browser bar.

POST

Create data

POST requests store data in the request "body", part of the request that is separate from headers

PUT

Update data

Similar mechanics as POST but with different name for clear communication

DELETE

Delete data

Similar mechanics as POST but with different name for clear communication

Response Status Code

Status Code
Meaning
Notes

200

OK

200 is the most common status code, and it generally means "success"

404

Not Found

Visited page that does not exist

403

Forbidden

We do not have access to retrieve this resource

How to send requests

JavaScript

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

Thunder Client

TC provides a convenient interface for creating and populating request URLs, methods, bodies, and query parameters. After sending requests with TC, TC formats responses for us in the VS Code interface.

The is a number that communicates the status of the request. Statuses can communicate success, failure and what kind of failure it was. Below are common status codes.

Software engineers decide what status code to attach to each response in app logic. We will do this when we write our own backend servers in Module 3. When sending responses, we should strive to provide the most precise status code for the given request. summarises HTTP status codes and what they represent.

Our apps need to send HTTP requests to access data from external sources. We will learn to send HTTP requests programmatically using JavaScript (for our users) and a VS Code extension called (for us to test APIs independently from our frontends). Note we have already been sending requests with Chrome (by visiting websites).

Rocket recommends using the NPM library to send HTTP requests from our apps. Axios is the most robust and popular JavaScript request-sending library we are aware of.

Below is an example Axios request from their that gets user data from the user with ID "12345". To use Axios we must install it as an and import it in the relevant file with import axios from "axios".

(TC) is a VS Code Extension that enables us to send requests and receive responses without our app frontends. This is helpful for testing APIs to determine if a bug is in the API or in our frontend.

There are many alternatives to Thunder Client, among which is a popular software called . Rocket chose Thunder Client because of its simplicity and integration with VS Code.

🏭
request "method"
response "status code"
This page
Thunder Client
Axios
official docs
NPM package
Thunder Client
Postman
Thunder Client provides a convenient interface for testing APIs. Source: Thunder Client