Await Fetch

Summary: in this tutorial, you’ll learn about the JavaScript Fetch API and how to use it to make asynchronous HTTP requests.

  1. Await Fetch Error
  2. React Fetch Await
  3. Async Await Fetch

The Fetch API is a modern interface that allows you to make HTTP requests to servers from web browsers.

If you have worked with XMLHttpRequest (XHR) object, the Fetch API can perform all the tasks as the XHR object does.

In addition, the Fetch API is much simpler and cleaner. It uses the Promise to deliver more flexible features to make requests to servers from the web browsers.

  1. Getting Data with Fetch & React Example. Let's see now see an example of fetching data with the fetch method. We'll use the GitHub API to get a list of users and we will use React.js to render the fetched users. Open the App.js file and start by adding the following imports.
  2. CF worker to log all REST API activity in a non-blocking way to an external service - including response time.

For instance, when we fetch HTTP-page from HTTPS (access less secure from more secure), then there’s no Referer. The Content Security Policy may forbid sending a Referer. As we’ll see, fetch has options that prevent sending the Referer and even allow to change it (within the same site). By specification, Referer is an optional HTTP-header.

The fetch() method is available in the global scope that instructs the web browsers to send a request to a URL.

Sending a Request

Async await with fetch

The fetch() requires only one parameter which is the URL of the resource that you want to fetch:

The fetch() method returns a Promise so you can use the then() and catch() methods to handle it:

When the request completes, the resource is available. At this time, the promise will resolve into a Response object.

The Response object is the API wrapper for the fetched resource. The Response object has a number of useful properties and methods to inspect the response.

Reading the Response

If the contents of the response are in the raw text format, you can use the text() method. The text() method returns a Promise that resolves with the complete contents of the fetched resource:

In practice, you often use the async/await with the fetch() method like this:

Besides the text() method, the Response object has other methods such as json(), blob(), formData() and arrayBuffer() to handle the respective type of data.

Handling the status codes of the Response

The Response object provides the status code and status text via the status and statusText properties. When a request is successful, the status code is 200 and status text is OK:

Output:

If the requested resource doesn’t exist, the response code is 404:

Output:

If the requested URL throws a server error, the response code will be 500.

If the requested URL is redirected to the new one with the response 300-309, the status of the Response object is set to 200. In addition the redirected property is set to true.

The fetch() returns a promise that rejects when a real failure occurs such as a web browser timeout, a loss of network connection, and a CORS violation.

JavaScript Fetch API example

Await Fetch

Suppose that you have a json file that locates on the webserver with the following contents:

Await Fetch Error

The following shows the HTML page:

In the app.js, we’ll use the fetch() method to get the user data and render the data inside the <div> element with the class container.

React Fetch Await

First, declare the getUsers() function that fetches users.json from the server.

Then, develop the renderUsers() function that renders user data:

Check it out the Fetch API demo.

Summary

  • The Fetch API allows you to asynchronously request for a resource.
  • Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json(). These methods resolve into the actual data.
  • Use the status and statusText properties of the Response object to get the status and status text of the response.
  • use the catch() method or try...catch statement to handle a failure request.

Async Await Fetch

  • Was this tutorial helpful ?