Be the Master of the Event Loop in JavaScript (Part 3)

XMLHttpRequest, fetch, and Axios

This is the last series of the JavaScript event loop. If you haven’t read my previous post, I recommend you read those first.

• Part 1 — macrotasks, microtasks, execution contexts, event queues and rAF
• Part 2 — Event bubbling, capturing, and delegation

In this post, I will talk about asynchronous functions in JavaScript.

• XMLHttpRequest
• fetch
• Axios

XMLHttpRequest

JavaScript allows you to fetch data in an asynchronous way. The oldest, most classic way is to use XMLHttpRequest. It’s a constructor function that allows you to send an HTTP request to the server.

const oReq = new XMLHttpReqeust();

Now oReq has the XMLHttpRequest object. To make an HTTP request, you should open the request first.

oReq.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');

The XHR method is not case-sensitive. So, you could even write it like “geT”, since it’ll be uppercased during the process. You can then send the request to the server.

oReq.send();

To receive the response from your request, you should attach a callback function to the XMLHttpRequest object.

oReq.addEventListener('load', function () {
  console.log(this.responeText);
});

// Result
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Note that you ought to use a normal function rather than an arrow function, since a normal function’s this is bound to the XMLHttpRequest, while an arrow function is bound to window. responseText of XMLHttpRequest doesn’t exist in the prototype chain of e.

'responseText' in e === false

But, don’t you think it’s strange? I have explained in the previous posts that there are a few types of tasks in JavaScript. But why is it called an asynchronous function?

In WHATWG documentation about XMLHttpRequest sending, it describes it as follows:

1. Set the send() flag.
2. If the synchronous flag is unset, then: … - Handle the tasks queue on the networking tasks source. - If ~50ms have passed since these steps were last invoked, terminate these steps.

We should keep our eyes on tasks queue and 50ms. Doesn’t this sound like something we’ve looked into together? Yes. It’s a setTimeout! So we know that XMLHttpRequest actually uses setTimeout to be executed. If XMLHttpRequest uses setTimeout, then it should be blocked by infinite Promises, since they are microtasks.

I ran this example in Codepen; the total time to log this.responseText was around 114,000ms. It means that even though XMLHttpRequest is an asynchronous function, there is still a way to block its execution, so you should place your code in the right place.

fetch

fetch is a newer API that has extra features that XMLHttpRequest doesn’t have. It returns a Promise that resolves to the Response to that request, whether it’s successful or not.

With fetch:

• Cache API is available with the request and the response object.
• fetch won’t receive cross-site cookies.
• fetch won’t send cookies.
• A promise from fetch won’t reject on an HTTP error status.

Only XMLHttpRequest can:

• Abort a request.
• Report progress.

Another difference is that fetch isn’t supportive in IE, since it uses Promise, which IE doesn’t support either. So if you should support the older browsers, you should use XMLHttpRequest.

MDN said there’s an interface that allows you to abort a request, but it says it’s an experimental technology. It doesn’t support IE and does support Safari partially. Check it out from here.

fetch gives you some more convenient methods to check the status of your response.

res.json() parses the response as the JSON object. If you use Promise, you should return res.json() again to get the right JSON object in the next .then chain. If you use async and await, you can simply add await.

// Promise
fetch(url)
  .then(res => {
    return res.json();
  })
  .then(data => {
    console.log(data);
  });

// async & await
const res = await fetch(url);
const data = await res.json();
console.log(data);

Inside fetch, you can see how it is described.

To queue a fetch task on a request to run an operation, run these steps:

1. If the request’s client is null, terminate these steps.
2. Queue a task to run an operation on the request’s client’s responsible event loop, using the networking task source.

What we should see is “Queue a task”. In this context, “queue a task” means to add a task to the task queue. Since fetch returns a Promise, it’s a microtask. But you can get the result in then. What if there are many microtasks running?

Like we experimented with in XMLHttpRequest, fetch also was blocked for many milliseconds until the previous microtasks were completely done executing.

Axios

Axios is a modern HTTP request library for both the browser and Node. It has over 67K stars from users. It has taken the best things from XMLHttpRequest and fetch.

So, the way to use Axios is actually simple and easy. It’s very similar to how to use fetch. You pass a URL to Axios as the first argument, but instead, you should use the right HTTP method, such as Axios.get.

// Promise 
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// async & await
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Conclusion

A JavaScript event is a very complex and difficult topic, but you should know it well if you use JavaScript every day. I did my best to explain what I know about JavaScript events. I hope that I could be at least a little bit of help with your understanding of this!

More in this series

• Read Be the Master of the Event Loop in JavaScript (Part 2)
• Read Be the Master of the Event Loop in JavaScript (Part 3)

Resources

• XMLHttpRequest — MDN
• XMLHttpRequest Interface — WhatWG
• Rest API example site — JsonPlaceHolder
• fetch — MDN
• fetch API vs XMLHttpRequest — StackOverflow
• AbortController — MDN
• fetch — JavaScript.info
• Axios — Github