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: