Axios Ajax

Posted on  by admin
This tutorial explains about making the Ajax Requests in Vue js application using Axios and fetch API.

Vue.js is a lenient JavaScript framework for developing fast and user-friendly applications. Unluckily, Vue doesn’t have any suitable mechanism to make external HTTP calls. However, there are many ways through which we can handle HTTP requests.

In this tutorial, we are going to make Ajax Requests to consume third-party API using Axios http client and fetch API.

Let’s understand what Ajax is?

Ajax is an Asynchronous Javascript and XML, and It is a widely used technique to access the webserver from client-sde over HTTP and HTTPS protocol.

AJAX supports XMLHttpRequest (XHR) objects; We can use API to render the data from a remote server and update the specific part of a web page, and It doesn’t refresh the entire web page.

Advantages of Ajax

  • It is always confusing when I saw these two keywords.
  • What is AJAX and what is Axios.
  • Why we use them and what are the functions of these two.
  • What is the difference? 1.HTTP requests in the browser.
  • There are many ways to make HTTP requests in the browser.
  • URL bar, Links, JavaScript, and submitting forms(GET/POST).

How Does AJAX Work?

Let us find out how does the Ajax work.

  1. All of these make the browser navigate and retrieve new documents. views are stored on the server and served up as HTML pages.
  2. when a user goes to a new page, the browser navigates in totality, refreshing and retrieving a brand new HTML document.
  3. each page retrieves stylesheets, scripts, files, etc. Asynchronous JavaScript And XML.
  4. AJAX is not a programming language.
  5. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.
  6. This means that it is possible to update parts of a web page without reloading the whole page.

Basic Ajax Request Example in JavaScript

Here is the basic Ajax request example coded in JavaScript for the GET method

Getting Started with Vue App

To install the Vue project, first, we need to install the latest Vue CLI 4 on our local development system.

Start installing a new Vue project.

Get inside the project.

(1)An event occurs in a web page(the page is loaded, a button is clicked).

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

Vue multi word error

To remove multi-word error warning, add the following code in vue.config.js file.

Start the app in the browser.

Create Vue Component

Create ShowUsers.vue file inside the components folder.

Import the Vue component inside the JavaScript script tag, define the component name inside the components:{ } object, and then define the component’s name within the template tag.

Install Axios in Vue

Axios is an extremely popular, Promised based JavaScript library for making HTTP requests. It is a Promise based HTTP client for the browser, and node.js it works smoothly on client and server.

  • (2)An XMLHttpRequest object is created by JavaScript.
  • (3)The XMLHttpRequest object sends a request to a web server.
  • (4)The server processes the request.
  • (5)The server sends a response back to the web page.
  • (6)The response is read by JavaScript.
  • (7)Proper action (like the page update) is performed by JavaScript.
  • 异步的JS和XML技术,指的是一套综合了多项技术的浏览器端网页开发技术, AJAX应用可以仅向服务器发送并取回必须的数据,并在客户端采用JS处理来自服务器的回应, 在服务器和浏览器之间交换的数据大量减少,服务器回应更快,指的并不是单一的技术,而是有机地利用一系列相关的技术。以异步的方式向服务器提交需求。.
  • Ajax is a set of web development techniques using many web technologies on the client side to create asynchronousweb applications.

Use command to install Axios package in Vue.

Let’s see how to use axios in Vue component.

We are going to use following API from JSONPlaceholder. JSONPlaceholder is a simple fake REST API for testing and prototyping. It’s like an image placeholder but for web developers.

We also have to define the mounted lifecycle hook in Vue to make the API calls.

Get and Display Data using Axios in Vue.js

In this step, we will make the Ajax Request using Axios and show you how to get a response from the server and handle it via Promise Object.

A promise object in JavaScript provides surety for a probable result in future. A promise has 3 presumable states: fulfilled, rejected, or pending.

The axios.get() method makes the API call and gets the response from the server. If the response is successful, then it goes to then block, and if it fails, then it goes to catch block.

Make AJAX Request in Vue.js with Fetch API

The Fetch API is a modernized substitute for XMLHttpRequest. Most of the libraries created considering XMLHttpRequest.

The Fetch API offers an uncomplicated interface for retrieving resources. You can quickly render the data from the server, and It supports the Cross-Origin Resource Sharing (CORS).

With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page.

How to Make Request with Fetch?

Let’s check out a basic example of fetching a JSON file using fetch API:

Pass the API URL in the fetch() method to get the response from the webserver. You can handle the server response in the then and catch block.

Here is the final code for displaying data, making fetch request.

Conclusion

In this tutorial, we looked ad two separate ways to send Ajax requests from a Vue.js application. We learned how to make REST API calls to the server to get the data.

What is a Put request?