Ajax Requests With jQuery Inside React

Dealing with asynchronous data is an inseparable subject when you are using a library like React. Fortunately, dealing with Ajax, is not diffcult. The first important thing that you should know, is that React is a view library and it has no Ajax features.

You have to use a third party library, or the native browser API to implement Ajax request.

In this documentation, we are going to show you how to deal with asynchronous request, so it’s up to you which library choose.

For simplicity, we use the jQuery. It’s also a good starting point how to integrate third party libraries with React.

Installing jQuery

Before anything else, we install jQuery in our project:

npm install --save jquery

And in your script, you can use it:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

Now you can use jQuery inside your React application.

Try it on CodePen.

Boilerplate

For continuing, we consider a simple scenario. We want to fetch the GitHub repositories list for Facebook, Microsoft and Google.

The api url is like this:

https://api.github.com/users/facebook/repos

First, let’s start our boilerplate:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

class App extends React.Component {
constructor(props) {
super(props);
}

render() {
return <div>
<h1>Ajax</h1>

{/* buttons */}

{/* list */}
</div>;
}
}

ReactDOM.render(
<App />,
document.getElementById('app')
);

Try it on CodePen.

Buttons

Now lets create our buttons:

<button onClick={() => this.getRepos('facebook')}>Facebook</button>
<button onClick={() => this.getRepos('microsoft')}>Microsoft</button>
<button onClick={() => this.getRepos('google')}>Google</button>

And so, we need to create our getRepos method:

getRepos(username) {
console.log(username);
}

Now by clicking each button, we can get the organization name.

Try it on CodePen.

Request

Now its turn for making our ajax request. We use $.get:

let url = `https://api.github.com/users/${username}/repos`;
let request = $.get(url);

In this case, our request variable, is something like a Promise object, so you can use done method to findout if the request has been resolved:

request.done(result => {
console.log(result);
});

Try it on CodePen.

State

We want to change the view by clicking each button, so we need state. We’ll initialize our state as an empty list at the beginning, and after fetching the data from API, we’ll set it to the new list. So in our constructor we’ll have:

constructor(props) {
super(props);
this.state = { list: [] };
}

And after our ajax request is fetched:

getRepos(username) {
let url = `https://api.github.com/users/${username}/repos`;
let request = $.get(url);
request.done(result => {
this.setState({ list: result });
});
}

List

Now we have to show our list. For this reason we create a List component which will accept our list as a property:

<List data={this.state.list} />

And we’ll render the list and show the output (for getting more information how the rendering works, go to the Lists and Keys documentation).

class List extends React.Component {
render() {
if (! this.props.data.length)
return <div>Please select an organization</div>;
    const listItems = this.props.data.map(item => 
<li key={item.id}>
{item.name}
</li>
);
    return <ul>{listItems}</ul>;
}
}

Try it on CodePen.

Aborting

What if we want to cancel the request? For example if the user clicks multiple times in a button. So it’s better to cancel the previous requests and just let the last request to be executed.

Aborting an ajax request, is related to your library. We are using jQuery, so we can use .abort() method on our returned object from $.get():

request.abort();

We keep this request object to a class variable, so we can refer to it later:

constructor(props) {
super(props);
this.state = { list: [] };
  this._ajaxPromise = null;
}

And in our getRepos method:

getRepos(username) {
let url = `https://api.github.com/users/${username}/repos`;
let request = $.get(url);
request.done(result => {
this.setState({ list: result });
});
  // save the request object for furthur usage
this._ajaxPromise = request;
}

And last step is to cancel the current ajax request, if the user executed a new one:

getRepos(username) {
if (this._ajaxPromise) {
this._ajaxPromise.abort();
}
  let url = `https://api.github.com/users/${username}/repos`;
let request = $.get(url);
request.done(result => {
this.setState({ list: result });
});
  this._ajaxPromise = request;
}

Try it on CodePen.

Handling Errors

You can handle unwanted errors. As discussed earlier, you should go to your ajax library documentation, for example in jQuery, you can use fail method on your request object:

getRepos(username) {
if (this._ajaxPromise) {
this._ajaxPromise.abort();
}
  let url = `https://api.github.com/users/${username}/repos`;
let request = $.get(url);
  request.done(result => {
this.setState({ list: result });
});
  request.fail(error => {
if (error.statusText === 'abort') {
return;
}
    alert(error.responseJSON.message);
});
  this._ajaxPromise = request;
}

Try it on CodePen.

You can clone the whole sourcecode from GitHub.