Axios : How to read JSON response?

When using Axios to read JSON responses, first ensure that a valid HTTP request is sent. Axios is a promise-based HTTP client suitable for both browsers and Node.js. Here are the steps and examples for using Axios to read JSON responses:

Step 1: Installing Axios

If you are using Node.js, you need to install Axios. You can install it using npm or yarn:

bash
npm install axios

or

bash
yarn add axios

In the browser, you can use it by adding the Axios CDN link:

html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Step 2: Sending HTTP Requests

Use Axios to send a GET request and retrieve JSON data from the server. For example, let's assume we're fetching information from an API that provides JSON data, such as one for retrieving user information.

javascript
axios.get('https://api.example.com/users/1')
  .then(response => {
    console.log(response.data); // JSON response body data
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  })
  .finally(() => {
    console.log('Request completed.');
  });

Step 3: Handling Responses

Within the .then() method, you can access the response from the server. Axios automatically converts JSON data to JavaScript objects, so you can directly access response.data to retrieve the needed data.

Example: Reading User Data

Assume the JSON response structure is as follows:

json
{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}

Here is the code to handle this response:

javascript
axios.get('https://api.example.com/users/1')
  .then(response => {
    const user = response.data;
    console.log(`User Name: ${user.name}`);
    console.log(`User Email: ${user.email}`);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Summary

Through the above steps and examples, using Axios to read and process JSON responses is straightforward and simple. Axios offers advantages including automatic JSON data conversion and its promise-based structure, making asynchronous HTTP request handling smoother and easier to manage. In practical work, this helps developers effectively retrieve and use data from various backend services.