What is Axios? The basics of Axios in VueJS

Tram Ho

The basics of Axios

What is Axios?

Axios is an HTTP client developed based on Javascript Promise, it can be used in font-end applications Vue.js, React, Angular … Using Axios makes it easy to send asynchronous HTTP requests to REST endpoint and CRUD implementation.

We need to have the following concepts:

  • An HTTP client is a piece of software, a library that can make HTTP requests to an HTTP server and receive responses. Simply put, it is closer to a web browser.
  • Javascript Promise is an object that helps control the completion or failure of an asynchronous action in Javascript
  • (refer to Knowledge of Javascript Promise).
  • Vue.js, React, Angular are currently very hot Javascript frameworks that help build flexible font-end applications that are fast and powerful.
  • REST endpoints are points (URLs) that provide API functions that allow us to interact with a system, for example when we want to interact with V1Study we can send HTTP requests to REST APIs provided by V1Study. level.
  • CRUD stands for Create, Read, Update, and Delete is a programming term referring to four familiar methods when working with data warehouses.

In short, Axios is a “browser” in Javascript that helps us to manipulate websites or APIs that help build more flexible font-end applications.

Install Axios

The axios library can be installed through the npm tool:

Or insert Javascript file path on CDNs:

If you use the Laravel framework, the Axios library is already pre-installed in the resources assets bootstrap.js file:

and just do npm install to install the pre-installed packages.

Method of sending HTTP request

The most commonly used HTTP methods for data mining are GET and POST. Axios has two methods to perform GET and POST data.

This code sends a request with the GET method to the URL http://v1study.com/user?ID=12345 , if successful the result will be printed to the console in .then () and if the error is printed to the console in .catch (). You can imagine it like opening a browser, typing in the desired URL and waiting, if the information is displayed you will be able to read it, otherwise an error message is displayed on the browser. Note, the parameter passed (query string) can take the parameter as follows:

Next we see how to send data with POST method to a URL:

The above code does the same as we open a new user creation form, enter the data and press the Submit button. Above we send single requests, what if we want to send many requests to retrieve data at the same time? The next example sends two requests, one for account information, and one for order information.

Other methods like DELETE, PUT, PATCH are also supported. You can see more in the Axios documentation. Next, we will learn how to add the configuration settings before sending the HTTP request (with the browser it is usually default so you do not notice).

HTTP requests can be sent using the syntax above, which can be passed to the configuration in the config object as follows:

Responsive data structure

The response object returned from the server has the following structure:

With this structure, when an HTTP request is sent to the server we can manage the information returned from the server, see the following example:

Hook API

In the process of sending out a request, just before sending it we may wish to do some work or as soon as we receive the response. For example, if you want a status bar that shows the percentage of work in progress, you need to know when to send the request and immediately upon receiving the response. Terms like Hook API or Interceptor can be used for what is described above. With axios you refer to the following code in conjunction with the nprogress library:

Control errors when sending HTTP requests with Axios

Detailed error control is essential, for each specific error we have a separate handle that enhances the user experience with the flexibility of the application:

Cancel a request

Cancellation is a necessary function, you imagine the user clicks on the button to submit the order and each order processes within 10 seconds, but right after clicking the request, the user wants to cancel the request to modify the order. This item with the product quantity is more, so cancel the request is very necessary.

Why use Axios

Currently there are a lot of Javascript HTTP Clients can be mentioned in addition to Axios such as using jQuery, fetch () method supported from ES6, SuperAgent, Qwest … However, Axios has many advantages as follows:

  • Axios builds on the Promise platform so it inherits the advantages of Promise.
  • Allows performing hook (intercept) right after sending request and receiving response.
  • Allow request cancellation, this is a function that other libraries don’t have.

Through the article, I believe you have answered the question What is Axios ?, Why use Axios ?. Axios is an HTTP Client that makes it easy to build connecting applications from multiple data sources. If so, you will find it similar to GuzzleHttp in PHP. Axios is a tool for easy data retrieval for frameworks such as Vue.js, React.js, Angular… to build flexible and easy font-end applications.

Share the news now

Source : Viblo