How to send HTTP Requests in React

Making HTTP requests using XMLHttp​Request

Sending HTTP request from your react app is quite simple. In fact, you don’t even need to use a library to do this.

All we need to do to send a simple GET request is to create a new XMLHttpRequest, add an event listener to it, open the URL and send the request.

import React, { Component } from 'react'
import { render } from 'react-dom'
import './style.css'
 
class App extends Component {
  constructor() {
    super()
  }
  componentWillMount() {
    this.getData()
  }
 
  getData() {
    // create a new XMLHttpRequest
    var xhr = new XMLHttpRequest()
 
    // get a callback when the server responds
    xhr.addEventListener('load', () => {
      // update the state of the component with the result here
      console.log(xhr.responseText)
    })
    // open the request with the verb and the url
    xhr.open('GET', 'https://dog.ceo/api/breeds/list/all')
    // send the request
    xhr.send()
  }
 
  render() {
    return (
      <div>
        <p>Hello World</p>
      </div>
    )
  }
}

xhr.open('POST', 'https://example.com')

xhr.send(JSON.stringify({ example: 'data' }))

Install Axios in you React project

For small applications, using XMLHttpRequest works just fine. As your apps get larger though, you might want to consider using an HTTP request library like axios.

These libraries do the same things we did above but they provide a much simpler and cleaner API. This is especially useful as your requests get more complex. Also, the API uses promises instead of plain old callbacks which helps to keep things readable.

So let’s take a look at how we can use axios to send HTTP requests.

First, we need to install axios in our react project. We can do so using this command:

npm install axios

Now that we got that out of the way, let’s send some request!

Sending GET requests in React using Axios

Sending HTTP Get requests is even easier when using axios.

All we need to do is to call the axios.get method and provide the URL of the endpoint.

async getDataAxios(){
    const response =
      await axios.get("https://dog.ceo/api/breeds/list/all")
    console.log(response.data)
}

This code does the same as the code above in 2 lines! In fact, it is even more as it is automatically parsing the JSON response for us.

async getDataAxios(){
    const response =
      await axios.get("https://dog.ceo/api/breeds/list/all",
          { params: {name: 'bruno'}}
      )
    console.log(response.data)
}

async getDataAxios(){
    const response =
      await axios.get("https://dog.ceo/api/breeds/list/all",
        { headers: {'Content-Type': 'application/json'}}
      )
    console.log(response.data)
}

Sending POST requests with Axios

POST requests are sent in the same way as GET requests. All we need to change is the method form get to post. The post method also has a slightly different parameter signature. It takes three parameters:

1. The Url
2. Post body data (optional)
3. A config object (optional)

In react, this would look something like this:

const response = await axios.post(
  'https://example.com',
  { example: 'data' },
  { headers: { 'Content-Type': 'application/json' } },
)
console.log(response.data)

The post body object (2. parameter) can be any object while the config object requires a certain schema. You can find about all the fields the config objects takes at the official axios GitHub repo.

Using Axios to send form data

Of course, JSON is not the only content we can send in a post request. We can also upload forms. This enables us to send binary data to the server like files and images. It is also possible to send a mixture of normal form fields and files.

To do this, we need to create a FormData object to store our form data.

const form = new FormData()

Now, we can set regular key/value pairs by using the set method:

form.set('username', 'malcoded')

Or we can append a file like so:

form.append('file', file)

Finally, we can send the request just like a regular POST request with the form as content. Additionally, we need to set the Content-Type header to “multipart/form-data”.

axios.post('example.com', form, {
  headers: { 'Content-Type': 'multipart/form-data' },
})

If you would like to learn more about file uploads in react, I’ve written a full, in-depth tutorial about creating a file upload component in react with a node.js backend.

Using the fetch API to make HTTP GET requests

Another alternative to XMLHttpRequests is the fetch API.

The fetch API is a relatively new browser API for making HTTP requests. It is a lot more modern and also easier to use than the XMLHttpRequest API.

The reason why we take a look at this last is because it is not supported in all evergreen browsers yet. By now, you guessed it, it is supported in all evergreen browsers but Edge. So you have to be careful when using this API, as you might need polyfills to use this API in certain browsers.

So let’s take a look at what making a GET request looks like:

async getDataFetch(){
    const response =
      await fetch("https://dog.ceo/api/breeds/list/all",
        { headers: {'Content-Type': 'application/json'}}
      )
    console.log(await response.json())
}

As you can see, it works quite similar to the axios API.

Making POST requests with the fetch API

Of course, it is also possible to make POST requests with the fetch API:

const response = await fetch('example.com', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ example: 'data' }),
})
console.log(await response.json())

Uploading form data works in a similar way:

const form = new FormData()
 
form.append('username', 'malcoded')
form.append('file', file)
 
const response = await fetch('example.com', {
  method: 'POST',
  headers: { 'Content-Type': 'multipart/form-data' },
  body: form,
})
console.log(await response.json())

Conclusion

In this tutorial, we learned how to make HTTP requests in react using different verbs, configurations, payloads and headers using different APIs and libraries.

I hope you enjoyed this post.

If you did please share this post!

Thanks for reading!