DEV Community

Cover image for Beginner's Guide To Asynchronous JavaScript - Part 2
Prashanth Vamanan Srinivasan
Prashanth Vamanan Srinivasan

Posted on


Beginner's Guide To Asynchronous JavaScript - Part 2


In the last post of this series we saw what is the difference between synchronous and asynchronous code and how JavaScript handles both of them.

What's in this post?

In this article we will:

  • Simulate asynchronous behaviour in JavaScript using setTimeout() method.

  • Learn about HTTP requests and HTTP verbs

  • APIs and API endpoints

Asynchronous code simulation

Assume we have the following code in a file named sandbox.js

Alt Text

Since the setTimeout() call is asynchronous it is executed in a separate part of the browser and does not block the remaining statements.

Once the 3 seconds has passed, the callback function is invoked printing the message inside the setTimeout() call.

Note: The handling internals of the setTimeout() call and where it is executed will be discussed in the upcoming posts.


Alt Text

HTTP Requests

HTTP is a protocol which allows us to fetch resources from external sources. (This is the simplest possible definition).

This protocol defines a set of request methods which denotes the specified action to be performed to obtain the resource.

They are also known as request verbs and there are four major ones - GET, POST, PATCH and DELETE

  • GET - GET requests are used for retrieving a specific resource.

  • POST - POST requests are used for submitting data to an external server (such as signup, login etc.)

  • PATCH - PATCH requests are used when we want to modify only certain attributes of a specific resource.

  • DELETE - DELETE request is used to DELETE a specified resource.

Why it is useful?

Whenever we develop any real-world application we might need to fetch data from external sources. The way we reach out to these external sources is by making a HTTP request.

Depending upon the type of HTTP verb used, the appropriate resource action (as mentioned above) will be performed.

API's and API Endpoints

We make an HTTP request to something known as an API endpoint.

An API (Application Programming Interface) in simplest terms allows applications to communicate with one another (as an example your application to communicate with google' servers for logging in through gmail).

This external server (google in this case) exposes to the public what is known as an API endpoint. These are URLs that a particular API or server exposes to us which we can use to get data from these servers.

Illustration - HTTP request to an API endpoint

Example API endpoint -

Alt Text

Usually most of the API's return response in a format known as JSON(JavaScript Object Notation - which will be covered later).

Response data from the above request:

Alt Text

Typically whenever we request data from an external server we use a HTTP GET request.

Conclusion and Next Steps

In this post we have seen how to simulate asynchronous code in JavaScript using setTimeout(). We also briefly touched upon the HTTP protocol, HTTP verbs, APIs and API endpoints.

In the next part we will see a practical demo of how to make an HTTP request using JavaScript and discuss about the various response codes associated with HTTP requests.

Thanks for reading this post and feel free to connect with me on Twitter for more such content. Have a nice day :)

Top comments (2)

abdulrahmanemad profile image

Really beautiful.
thanks for your effort

sprashanthv profile image
Prashanth Vamanan Srinivasan

Thank you very much. Glad you found it helpful :)

The JavaScript Brief

1. Top 5 MERN STACK projects to improve your practical understanding

Boost your MERN Stack development skills by undertaking interesting beginner projects. These five engaging projects cover web applications and range from social media website applications to geo-social networking maps. Hone your understanding and apply modern techniques backed up by hands-on experience.

2. How To Optimize Your React App’s Performance

Learn the best optimizing techniques to make your React applications faster and more efficient. Focusing on the identification of performance bottlenecks and common pitfalls to avoid, these optimization strategies will keep your applications running smoothly even when faced with growing complexity.

3. A story of let, const, object mutation, and a bug in my code

In the pursuit of bug-free code, explore an incident involving a mix-up between const and let, making sure your custom code works effectively with third

party documentation. Discover best practices on program flow and learn about JavaScript's unpredictable aspects to ensure your core code is robust.