• Blog Details

Asynchronous Programming - Should you wait for your ice cream or eat it?

debuggedpro
debuggedpro
debuggedpro

Asynchronous Programming - Should you wait for your ice cream or eat it?

Debugged-Pro
Gurpreet Singh
  • Thursday, April 29, 2021
  • 20 min
Debugged-Pro

In the world of instant data transfer, you may have encountered some pebbles. These pebbles might look troublesome right now, but in the long run, they are God's gems.

These are the gems that will make your website/ software applications worth using. You might be wondering what are these gems that I am being so fond of. These are 3rd party APIs.

Yes, 3rd Party APIs are the ones that will make your website worth visiting by sending and fetching required data.

 

Need of 3rd Party APIs

Imagine, you don't have any data on your website, no ads, no blog posts, no videos and pictures, none whatsoever. What are you going to show?

And even if you've some data locally, assess the resources it is going to utilize on your live site. For one page it's ok but, in the long run, your website may easily be showing hundreds of pages. So, what then?

The resources that are being used by the uploaded data will make your website heavy. It'll get sloppy, buggy, and prone to security issues. No doubt, users will go for better alternatives.

This is when 3rd Party APIs come to the rescue. Some former teams of programmers or individual programmers store the data on their servers. They, then, fabricate a remote URL which you'll use to fetch or send data.

These 3rd party APIs save the trouble of time wastage, resource overuse and lightens your website.

 

The battle of differences: 1st Party vs 3rd Party API

1st Party API: An API that you yourself create. You may choose to develop a 1st Party API with your team, which is entirely up to you. The main convention is you are involved in making that API.

3rd Party API: An API that you do not create yourself. You have no involvement, whatsoever, in creating that API. Your client may offer his/her generated API or some online API.

Is there any 2nd party API?

No, there's no term like 2nd Party API just like there is no Apple iPhone 9.

 

How asynchronous flow actually works?

rte_image_88.png


General Meanings: 

  1. Synchronous: existing or occurring at the same time.
  2. Asynchronous: out of synch, not occurring at the same time.
 
A simple block of code, not fetching anything from the server makes it synchronous code. Because the data is from the local machine, the execution of the code is expeditious.
 
When you assemble a 3rd party API or halts the code till some data is fetched, the code is said to be asynchronous. Latter code doesn't run till the former code, with async code, either returns a resolver or rejection.
 
In an async code, it is mandatory to halt the code otherwise the code will be executed without the data. This will lead to empty pages of a website, thus making website pages unusable.
 
In Figure 1, we can see that in synchronous code at every request, a response is being received whereas in async code, first all the requests are served then, from them, all the necessary data is received. This way there is, rarely, loss of data which also makes our website fast in the long run.
 
 

Common Libraries that make Asynch programming child's play:

  1. Fetch Data: axios.get("URL", headers).then().catch()
  2. Post Data: axios.post("URL", data, headers).then().catch()

 

fetch("URL",
method: 'POST', // *GET, POST, PUT, DELETE, etc.
).then().catch()

You can put headers and data if you want. Fetch() takes another parameter, method, which tells fetch what requests have to be sent.

To post, you must pass Headers, for authentication purposes, and data, that you need to send, on the server.

 

var { graphql, buildSchema } = require('graphql');
var schema = buildSchema(`
 type Query {
    hello: String
 }
`);
var root = { hello: () => 'Hello world!' };
graphql(schema, '{ hello }', root).then((response) => {
 console.log(response);
});

Schema means structure. Here, graphql is a function that takes in the structure of a query and gives you a response.

This response is then being consoled in the browser's console window.

 

XMLHttpRequests provide you with services and methods using which you can send and fetch data. There are many methods at one's disposal, so for further help, you can visit the official documentation by clicking on the heading itself.

To Fetch/ Get data:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.onload = function () {
  // Request finished. Do processing here.
};

xhr.send(null);

To Send/ Post data:

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");

 

Conclusion

In the long run, I believe you should wait for the ice cream to get cold in the refrigerator, and then it is cold. It is worth waiting sometimes to reap the long-term benefits.

So, why futz, bro?

 

I hope this helps you in the long run. Do share your experience and views on asynchronous programming

Stay safe, stay healthy and live your life to the fullest! Because you only got one. :D

Share on:

Comments:

Leave a comment:

Let's Work Together

Ready to start a project?

Free Quote
Or call us now0172-4785461
Debugged-Pro
Debugged-Pro
Debugged-Pro