Axios Library in JavaScript – HTTP Requests in JavaScript

[soniya55531]

Understand how to use the Axios library in JavaScript to make HTTP requests correctly!

If you prefer this content in video lesson format, watch the video below or access our YouTube channel !


To receive the file(s) used in the class by email, fill in :

Your best email
To send
JavaScript Icon
JavaScript
Impressive
How to use JavaScript in any company and any area, with examples fully applied to the reality of the Job Market, whether to become a Front End, Backend, Full Stack or Mobile Developer.

Start now
Right arrow
JavaScript icon used as backgroundThree images of JavaScript course classes
Axios Library in JavaScript – HTTP Requests in JavaScript
In today's class, I'll show you how to use the Axios library to make HTTP requests in JavaScript.

You will notice that Axios is a very simple library to use, but extremely useful, especially when dealing with the interaction between the front-end and the back-end.

We will use a project that we have previously built and, through twitter data the Axios library in JavaScript, we will display the information appropriately to users.

Additionally, we will learn a little more about back-end, front-end, HTTP, requests and API. These are very common and important terms, so it is essential that you familiarize yourself with them.

So, download the available material and come with me, because today I'm going to show you how to make HTTP requests in JavaScript with the Axios library.

Project Presentation – Front-End
In the material available for download, you will find a folder with the back-end and front-end files of our project.

During this lesson, I will use VS Code with the necessary extensions to edit and run our application. So, if you don't have VS Code installed yet, be sure to check out this lesson .

The front-end represents the visual part of the application, that is, what the user will see and interact with. To see what the front-end of our project looks like, we can right-click on the index.html file and select Open with Live Server .

Open with Live Server
This will display the 2023 Formula 1 drivers' ranking table , which we have already seen in previous classes.

2023 Formula 1 Drivers' Rankings Table
How Front-End and HTTP Requests Work
In previous classes, we used a Formula 1 table to display the drivers' classification, where all the data was inserted into an array in our JavaScript file.

However, in practice, the front-end makes an HTTP request to the back-end to obtain the necessary data and populate the table correctly.

In other words, the backend is the intelligence behind the project, responsible for managing the data and, when it receives the HTTP request , providing the data in an appropriate manner.

What is an HTTP Request
HTTP (HyperText Transfer Protocol) is a set of rules that determines how communication occurs on the internet , operating through requests and responses.

When you access a website, you are actually sending an HTTP request and receiving a response from the server containing the files needed to view the page's content.

This request and response form the basis of HTTP communication, commonly referred to in English as Request and Response .

Back-End – Creating API with Information
Since we will use HTTP requests to obtain the information, we will make some modifications to our files.

Starting with script.js , let's remove the line that imported data from the Pilots table .