This chapter explains networking with React. We will learn about promises, which make asynchronous code cleaner and more readable. For networking, we will use the fetch library. As an example, we use the GitHub REST API to demonstrate how to consume RESTful Web Services with React.
In this chapter, we will look at the following:
In this book, we are using the Windows operating system, but all tools are available for Linux and macOS as Node.js and create-react-app have to be installed.
The traditional way to handle an asynchronous operation is to use callback functions for the success or failure of the operation. One of the callback functions is called, depending on the result of the call. The following example shows the idea of using the callback function:
function doAsyncCall(success, failure) {
// Do some api call
if (SUCCEED)
success(resp);
else
failure(err);
}
success(response) {
// Do something with response
}
failure(error) {
// Handle error
}
doAsyncCall(success, failure);A promise is an object that represents the result of an asynchronous operation. The use of promises simplifies the code when doing asynchronous calls. Promises are non-blocking.
A promise can be in one of three states:
In this chapter, we focused on networking with React. We started with promises that make asynchronous network calls easier to implement. It is a cleaner way to handle calls, and much better than using traditional callback functions. In this book, we are using the Fetch API for networking, therefore we went through the basics of using fetch. We implemented two practical React apps that calling open REST APIs and we presented the response data in the browser. In the next chapter we will look some useful React component that we are going to use in our frontend.
Packt has other great resources for learning about React:
© 2018 Packt Publishing Limited All Rights Reserved
