This is a series of articles about web programming. Here, I would like to share a few knowledge and experience with anyone.
In the first article, I will talk about Axios and Fetch, a knowledge so important in web programming. I hope the article will bring a lot of useful knowledge to everyone.

What is Axios?

Axios is a JavaScript library that provides a promise-based HTTP client for Server (Node.Js) and Client (Browser).
On the server side, it uses the native node.js HTTP module and uses XMLHttpRequest on the client side (Browser). (Quote: axios-http.com)

Source of image: axios-http.com

Axios provides some outstanding features as follows:

  • Create XMLHttpRequests from the client (browser).
  • Server: Support make HTTP requests from node.js
  • Supports the Promise API.
  • Intercept request and response.
  • Transform request and response data and cancel requests.
  • Client-side support for protecting against XSRF.
  • … And many other features.

Using Axios helps us save a lot of time writing code, making the source code more concise and readable.
As a result, Axios has become a widely used library in modern web applications.

What is Fetch API?

The Fetch API is a modern JavaScript interface for making network requests, similar to XMLHttpRequest (XHR). Fetch support for send and receive requests from clients by javascript. Most browsers today support Fetch
The Fetch API has the following interfaces/functions:

  • Fetch() global function. This method starts the process of fetching a resource from the network and returns a promise that is a response from the server side. (Quote: developer.mozilla.org)
  • Headers: Allow to perform many actions on HTTP request and response headers (get, append, delete,...).
  • Request: It represents a resource request. There are many properties in a Request. For example: Request.body, Request.headers, Request.bodyUsed, Request.cache, Request.method, ...
  • Response: It represents the response to a request. A few response properties are Response.body, Response.headers, Response.ok, Response.status, … and some methods is Response.error(),
  • Response.redirect(), Response.json(), …

Code example:

function handleGetData(url, body) {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  })
    .then(function (response) {
      console.log("response: ", response);
      return response.json();
    })
    .then(function (data) {
      console.log(data);
    })
    .catch(function (err) {
      console.log("Something went wrong!", err);
    });
}
 
Because the Fetch API easier to create asynchronous requests and handle responses than using an XMLHttpRequest, So today, it is more commonly used.

Compare Axios and Fetch.

Both Axios and Fetch are libraries used to perform HTTP requests, supporting most request methods such as POST, GET, PUT, DELETE, etc.
Both also provide Promise support for handling requests and receiving responses via then and catch. So, what are the differences between Axios and Fetch, and which library should you choose?
So, what are the differences between Axios and Fetch, and which library should you choose?

Firstly
Fetch is a tool built into current browsers and a part standard of JavaScript, so you don't need to install anything else.
As mentioned above, Because Axios is a third party, you must install it via npm or yarn or CDN

Secondly
Because don't need to be installed, Fetch consumes less space. However, it depends on the browser (chrome, firefox, safari...)
Source code use Axios is more complex but Ensures consistency regardless of browser version.

Finally
Axios provides us with more features than Fetch
Ex:
    • Automatic format JSON response
    • Interceptors are an important feature
    • Cancel request
…

Conclusion.

Through the article, I introduced Axios and Fetch. That is an important part of knowledge about web programming.
Axios isn't too good and Fetch isn't too bad either. It's only perfect when it is comfortable with your project.
So, Based on many factors such as customer requirements, project size, and member experience,... to make the right choice.
Hope this article is useful for you and see you in my next articles.
 

Source of image: bhmpics.com

Leave a comment

*