What Axios is, build a private mining application using Vue.js and axios

Tram Ho

Today’s big websites have APIs that allow us to write interactive applications, for example, with social networks Facebook and Google, we all have APIs to make these interactions. In Vietnam, a number of major e-commerce sites have begun to provide RESTFull APIs such as Lazada, Sendo … or FPT’s open development system, which also has APIs that allow you to implement. These API systems may use OAuth 2 open authentication or may not be necessary. It is possible to create applications to work with these API systems by calling the provided APIs.

The knowledge in the article helps you visualize what is needed for that connection. At the end of the article, we will implement a news extraction application from Vnexpress.net .

1. Basics of Axios

1.1 What is Axios?

Axios is an HTTP client based on Javascript Promise object, it can be used in Vue.js, React, Angular font-end applications … Using Axios easily send asynchronous HTTP requests to the REST endpoints and implement CRUD functions. We come across some concepts you may not have known about:

The HTTP client is software, the library can make HTTP requests to the HTTP server and receive reponse. You could simply consider it close to a web browser.

Javascript Promise is an object that helps control the completion or failure of an asynchronous action in Javascript (See Knowledge of Javascript Promise). Vue.js, React, and Angular are very hot Javascript frameworks, helping to build flexible font-end applications that are fast and powerful.

REST endpoints are URLs that provide API functions that allow us to interact with a system, for example when we want to interact with Lazada we can send HTTP requests to the REST APIs provided by Lazada. grant.

CRUD stands for Create, Read, Update, Delete is a programming term that refers to 4 familiar methods when working with a data warehouse.

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

1.2 Installing Axios

Axios library can be installed via npm tool:

Or insert the Javascript file path on the CDN:

If you use the Laravel framework, the Axios library is already set up in resources assets bootstrap.js:

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

1.3 The methods of axios

1.3.1 Method to send an HTTP request

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

This code sends a request with the GET method to the URL http://demo.com/user?ID=12345 , if successful the result will be printed to the console in .then () and if an error is printed in the console error in .catch (). You can think of it like opening your browser, typing in the path you need and waiting, if the information is displayed you will be able to read it, otherwise an error message will show up on the browser. Note that the query parameter (query string) can include the following parameters:

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

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

Other methods such as DELETE, PUT, PATCH are also supported. You can refer to the document in Axios. Next, we will learn how to add additional configuration settings before sending an HTTP request (with the default browser, so you should not pay attention).

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

1.3.2 Data structure response

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:

1.3.3 Hook API

In the process of sending a request, just before sending it we may want to do some work or as soon as the response is received.

For example, if you want a status bar to show the percentage of work in progress, you need to know the timing of the request and the response. Terms like Hook API or Interceptor can be used for what is described above. For axios you refer to the following code snippet in conjunction with the nprogress library:

1.3.4 Control errors when sending HTTP requests with Axios

Detailed error control is essential, with each specific error we will have separate handling to enhance user experience with the flexibility of the application:

1.3.5 Cancel a request

Canceling an order is a necessary function, you imagine the user clicks the submit button and every order is processed in 10 seconds, but immediately after clicking the user wants to cancel the request to amend the order. This item with more products, such a cancellation request is very necessary.

2. Building Vnexpress.net news exploitation application with Vue.js + Axios

2.1 Introduction

In Part 1 understand what Axios is? and know how to use this library, in the next section we will build together a specific example to better understand how to apply Axios. Our example is a news extraction site from Vnexpress.net .

Because Vnexpress.net does not provide API for exploiting news, we will use RSS2JSON to convert from RSS into an API to return Json data. The returned data structure has the form of Json as shown below:

Ok, so we have the data provisioning API, next we will use Vue.js and Axios to exploit the news and re-present the page.

2.2 Establishment of news exploitation site

Application interpretation:

The entry point of the application is to use axios.get to retrieve data from the API provided by RSS2JSON, the data returned as JSON.

Using Vue.js’s v-for to iterate over the results array and display each item (article) in this array, we style it with bootstrap.

Due to the limited time, the mining application only pauses at the basic feature to help readers better understand axios, so we will make a powerful and full-featured information mining application. than.

3. Why use Axios?

Currently, there are many Javascript-based HTTP Clients that can be mentioned besides 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 hooking (intercept) as soon as the request is sent and received. Allow cancellation of requests, this is a function that other libraries do not have.

4. Conclusion

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 applications connecting from multiple data sources, and if you relate it you will find it similar to GuzzleHttp in PHP. Axios is a tool that makes it easy to get data for frameworks like Vue.js, React.js, Angular … build flexible and easy font-end applications.

Share the news now

Source : Viblo