Making HTTP Requests with Axios in React

12
SHARES
301
VIEWS

Just about every project needs to interface with a REST API at some stage. Axios is a lightweight HTTP client based on the $http service within Angular.js v1.x and similar to the Fetch API.

Axios is promise-based and thus we can take advantage of async and await for more readable asynchronous code. We can also intercept and cancel requests, and there’s built-in client side protection against cross site request forgery. But the best part about Axios? The easy to use API!

Using it inside a React project is simple! In this example we’ll use Axios to access the common JSON Placeholder API within a React application. We can start by adding Axios to our project:

// Installing with Yarn
$ yarn add axios

// Installing with npm
$ npm install axios --save

Making GET Requests in Axios

If we then create a new component named PersonList, we’d be able to hook into the componentDidMount lifecycle hook and perform a GET request after importing axios.

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }


  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Using axios.get(url) we then get a promise which returns a response object. As we’re looking for the response data, we’ve assigned the value of the person to res.data.

We can also get other information about our request such as the status code under res.status or more information inside of res.request.

Making POST Requests in Axios React

We can handle other verbs such as POST and PUT in a similar fashion. Let’s create a form that allows for user input and subsequently POST the content to an API:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Using POST gives us that same response object with information that we can use inside of our then call.

Making DELETE Requests

We can delete items from our API using axios.delete and passing the URL as a parameter. Let’s change our form to delete a user instead of adding a new one:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  changeFunc = event => {
    this.setState({ id: event.target.value });
  }

  submitFunc = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.submitFunc}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.changeFunc} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Once again our res object provides us with information about our request.

Base Instance

Axios allows us to define a base instance in which we can define a URL and any other configuration elements. Let’s create a file named api.js and export a new axios instance with these defaults:

import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

It can then be used inside of our component by importing our new instance like so:

// Omitted
import API from '../api';

export default class PersonList extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
}

Using async and await in Axios React

We can make working with promises even simpler with async and await. The await keyword resolves the promise and returns the value which we can assign to a variable. Here’s an example:

handleSubmit = async event => {
  event.preventDefault();

  // Promise is resolved and value is inside of the response const.
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};
Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending