Register to get access to free programming courses with interactive exercises

HTTP Requests JS: Asynchronous programming

Asynchrony always occurs when there are input/output operations, including file operations and any network communication. This applies, first of all, to HTTP requests, which no web application can do without. And frontends do nothing except make requests to servers.

To understand this lesson, you need to understand how the HTTP API works.

Asynchrony occurs naturally in network requests. The server needs some time to accept the request, process it, and send the response back. And the answer may not come if there are network errors.

At the most basic level, an HTTP request and HTTP response are just text sent to the server and from the server back to the client:

GET / HTTP/1.1
HOST: ru.hexlet.io


HTTP/1.1 200 OK
Date: Mon, 27 Jul 2020 12:28:53 GMT
Server: Nginx/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2020 19:15:56 GMT
Content-Length: 666
Content-Type: text/html
Connection: Closed

In application code, the real structure of the request and response is hidden for easier management. The requests themselves are performed by HTTP-clients, libraries whose task to fulfil requests and process responses via HTTP. In the JavaScript world (frontend and backend) the axios library is used for this. Below is a simple example:

import axios from 'axios';

// Don't forget that the function is asynchronous
const fn = async () => {
  // GET-request to the Hexlet site
  const response = await axios.get('https://hexlet.io');
  console.log(response.status); // response code
  console.log(response.headers); // printing the headers
  console.log(response.data); // response body
}

The interface of this library is extremely simple. For each HTTP method, the corresponding method of the axios object is defined inside it. The example above uses get(), but you can also use post(), delete() and others. Each of these methods takes a URL as its first parameter. Subsequent parameters vary depending on the meaning of the methods. The methods themselves are asynchronous, so their use is usually accompanied by async/await.

In turn, the result of any request will be a Response object, which represents the response from the server. For ease of use, this object stores not only the raw response, but also the response data, which has been prepared for convenient processing. For example, to get the response status, you just need to access to the response.status property.

To make a POST-request use the post() method. The second parameter of this method takes an object with data that will be sent to the server. Axios is smart enough to present this object as text (as part of the body of the request) and set all the necessary headers to process it (e.g., content-length or content-type).

const fn = async () => {
  const data = {
    email: 'mysuper@email.com',
    firstName: 'John',
  };
  // axios will pack the data into json itself
  const response = await axios.post('https://hexlet.io/u/new', data);
}

As a rule, HTTP requests are not executed in packets. In real code, user actions such as submitting a form or loading data result in one simple request. So although asynchrony is used here, it adds almost no complexity to the code. And thanks to async/await, the code basically looks like synchronous code.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.