The Complete Guide to Using Axios

Axios is a JavaScript library that provides a simple API for sending HTTP requests from client-side JavaScript code or server-side Node.js code. Axios is built on JavaScript’s Promise API, making asynchronous code easier to maintain.

Get started with Axios

You can take advantage of Axios in your apps using a Content Delivery Network (CDN) or by installing it in your project.

To use Axios directly in your HTML, copy the CDN link below and insert it into the head section of your HTML file.

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

This approach allows you to use Axios and its HTTP methods in the body of your HTML script. Axios can also consume REST APIs in frameworks such as React.

To use Axios in your Node.js project, install it in your project directory using the npm or yarn package manager.

 npm install axios
yarn add axios 

Once installed, you can start using Axios in your JavaScript projects.

 const axios = require('axios');
 

This guide uses the free JSONPlaceholder API.This API has a set of resources, but we use /comment and /post end point. An endpoint is a specific URL that can be accessed to retrieve or manipulate data.

Make a GET request with Axios

There are multiple ways to make a GET request using Axios. However, the syntax generally depends on your preferences.

One way to make a GET request is axios() A method with an object that specifies the request method obtain and the URL to send the request to.

for example:

 const axios = require("axios");
axios({
  method: "get",
  url: "https://jsonplaceholder.typicode.com/comments",
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

This example creates a promise using the asynchronous programming model. . after that() and . catch() method. The promise will log the response to the console if the request succeeds and log an error her message if the request fails.

Axios also provides an easier way to make GET requests. . obtain() to the method Axios Illustration.

for example:

 axios
  .get("https://jsonplaceholder.typicode.com/comments")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

Make a POST request with Axios

Making a POST request with Axios is similar to making a GET request. This request can be used to send data to the server.

The code snippet below is an example of how to use Axios. . director() Method:

 axios
  .post("https://jsonplaceholder.typicode.com/comments", {
    name: "Jackson Smith",
    email: "jsmith@example.com",
    body: "This is a piece of art.",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

This code makes a POST request to the JSONPlaceholder API to create a new comment.of axios.post the method returns the data /comment the last stop.

The data sent in the request is name, e-mailand body property. If the request succeeds, after that The method logs response data to the console. Also, if you get an error, catch The method logs errors to the console.

Create a PUT/PATCH request with Axios

You can update existing resources on the server using PUT or PATCH requests. PUT replaces the entire resource, while PATCH only updates the specified fields.

To make a PUT or PATCH request with Axios, . put() again .patch() Method.

Here’s an example of how to update using these methods: e-mail Properties of comment with id 100:

 const axios = require("axios");
axios
  .get("https://jsonplaceholder.typicode.com/comments/100")
  .then((res) => {
    console.log(res.data.email);
  })
  .catch((err) => {
    console.error(err);
  });
axios
  .patch("https://jsonplaceholder.typicode.com/comments/100", {
    email: "donaymilin@ether.com",
  })
  .then((res) => {
    console.log(res.data.email);
  })
  .catch((err) => {
    console.error(err);
  }); 

This program first makes a GET request to the endpoint “https://jsonplaceholder.typicode.com/comments/100”.Then log e-mail property of the comment with the id of 100 to the console. I’m doing a GET request so that I can see what has changed after making a PATCH request.

The second request is a PATCH request to the same endpoint. This code will update the comment email to: donaymilin@ether.com.

Make a DELETE request with Axios

You can use. erase Request to delete a resource on the server.

See the following example of how to use . . erase() Methods to remove resources from the server:

 axios
  .delete("https://jsonplaceholder.typicode.com/comments/10")
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.error(err);
  });
 

By logging an empty object to the console, the code above indicates that we have removed the comment with ID 10.

Make concurrent requests with Axios

Axios can be used to retrieve data from multiple endpoints at once. To do this, . all() Method. This method accepts an array of requests as a parameter and will only resolve when all responses have been received.

In the following example, . all() The method retrieves data from two endpoints simultaneously.

 axios
  .all([
    axios.get("https://jsonplaceholder.typicode.com/comments?_limit=2"),
    axios.get("https://jsonplaceholder.typicode.com/posts?_limit=2"),
  ])
  .then(
    axios.spread((comments, posts) => {
      console.log(comments.data);
      console.log(posts.data);
    })
  )
  .catch((err) => console.error(err));
 

The code block above sends requests simultaneously and sends responses to . after that() Method.Axios . spread () The method separates the responses and assigns each response to its variable.

Finally the console is data Two response properties: comments and posts.

Intercept requests with Axios

Sometimes we need to intercept requests before they reach the server. You can use Axios interceptor.request.use() How to intercept requests.

In the following example, the method logs the type of request to the console each time a request is made.

 axios.interceptors.request.use(
  (config) => {
    console.log(`${config.method} request made`);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
axios
  .get("https://jsonplaceholder.typicode.com/comments?_limit=2")
  .then((res) => console.log(res.data))
  .catch((err) => console.error(err));
 

The program axios.interceptors.request.use Method.This method has composition and error object as an argument.of composition The object has a request method (config. method) and the request URL (config.url).

The interceptor function is composition Allow the request to be processed normally.the function was rejected if there was an error promise object.

Finally, the program makes a request to test the interceptor. The console will log the type of request made (her GET request in this case).

Axios has more

You learned how to use Axios to make and intercept requests in your project. A JavaScript developer can take advantage of many other features such as transforming requests and using his Axios instance. Axios is the recommended option for making HTTP requests in JavaScript applications. However, the Fetch API is another great option to consider.