How do I send requests using JavaScript Fetch API?

In older browsers, there was only one way to send asynchronous HTTP requests (AJAX requests) from JavaScript using the XMLHttpRequest object. Starting in Chrome 42, the Fitch API method was introduced as an alternative to XMLHttpRequest.

The Fetch API introduces a new global fetch() method that allows network requests to be made similar to XMLHttpRequest (XHR), but in a more powerful and flexible way. Fetch API is the better alternative to XMLHttpRequest and can be easily used in conjunction with other technologies such as Service Workers.

The main difference between the Fetch API and XMLHttpRequest is that the Fetch API uses Promises, which allows you to have a simpler, cleaner API, avoid a lot of callbacks, and forget about the complex XMLHttpRequest API.

Basic Fetch API Request Example

A basic request to get JSON from the server using the Fetch API looks like this:

Fetch API Request Example
fetch('https://reqbin.com/echo/get/json')
   .then(response => response.json())
   .then( json => console.log(json))
   .catch( error => console.error(error))

For comparison, the same request using the XMLHttpRequest object:

XMLHttpRequest Request Example
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://reqbin.com/echo/get/json");

xhr.onload = function () {
   console.log(JSON.parse(this.responseText))
};

xhr.onerror = function (err) {
   console.error(err)
};

xhr.send();

Getting Started with Fetch API

To use the Fetch API, you need to call the fetch() method and provide the target URL as the first parameter.

fetch('https://reqbin.com/echo/get/json')

This call will return a JavaScript Promise object. To wait for the Promise to complete its task, use the then() method and the catch() method to handle any errors that occur while the Promise is running.

  .then(response => console.log(response.status))
  .catch( error => console.error(error))

The then() call returns a promise, which resolves to the Response object associated with the requested resource. The Fetch API Response object has a number of useful properties and methods. For example, to check the status of the request, use the response.status property, to see the response headers, check the response.headers property.

If you are expecting JSON as a result of your request, call the response.json() method. It reads the data returned by the server and returns a promise that resolves with a JSON object. Accordingly, if you are expecting text, call response.text(). If you are expecting binary data (such as an image), call response.blob() or response.arrayBuffer(). Since the response.json() call also returns a promise, we need to chain on another then() to wait for that promise to complete.

An example of loading JSON using the Fetch API.

Fetch API Download JSON Example
fetch('https://reqbin.com/echo/get/json')
   .then(resp => resp.json())
   .then( json => console.log(json))

An example of loading XML using the Fetch API.

Fetch API Download XML Example
fetch('https://reqbin.com/echo/get/xml')
   .then(resp => resp.text())
   .then( xml => console.log(xml))

Sending HTTP Headers with Fetch API Request

You can pass HTTP headers to the fetch() request as the second parameter. For example, to pass the Bearer Token Authorization Header, call fetch() with the {headers: {Authentication: 'Bearer Token'}} parameter.

Fetch API Request with Bearer Token Authorization Header
fetch('https://reqbin.com/echo/get/json', {
  headers: {Authentication: 'Bearer Token'}
})
   .then(resp => resp.json())
   .then( json => console.log(json))

The example below shows how to send multiple headers to the server, including a custom HTTP header.

Fetch API Request with Custom Headers
fetch('https://reqbin.com/echo/get/json', {
  headers: {
    Accept: 'application/json',
    Authentication: 'Bearer Token',
    'X-Custom-Header': 'header value'
  }
})
   .then(resp => resp.json())
   .then( json => console.log(json))

Due to security restrictions, as well as the fact that some headers are calculated automatically (for example, Content-Length), there is a limitation on the header names that you can send to the server.

Forbidden Fetch API headers names:
  • Content-Length
  • Host
  • Referer
  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • etc.

Sending POST request with Fetch API

To make a POST request using the Fetch API, we need to pass the: 'method: POST' to the fetch() method as the second parameter (same for HEAD, PUT, PATCH and DELETE request methods):

Fetch API POST Request
fetch('https://reqbin.com/echo/post/json', {
  method: 'POST'
})
   .then(resp => resp.json())
   .then( json => console.log(json))

POST data can be passed to the Fetch API call with the body parameter. We also need to pass the data type using the Content-Type header so that the server can properly recognize and process the transmitted data. Therefore, the correct example of sending JSON to the server looks like this:

Fetch API POST JSON Example
fetch('https://reqbin.com/echo/post/json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({orderId: 1})  
})
   .then(resp => resp.json())
   .then( json => console.log(json))

Submitting HTML Form Data to the Server Using the Fetch API

To submit HTML form data to the server with Fetch API, you need to create and populate a FormData object and pass it to the fetch() request along with the POST method.

Fetch API POST JSON Example
let data = new FormData();
data.append('orderId', '1');
data.append('customer', 'John Smith');
		
fetch('https://reqbin.com/echo/post/form', {
  method: 'POST',
  body: data
})
   .then(resp => resp.text())
   .then( html => console.log(html))

Note that you do not need to specify the Content-Type header yourself, as the fetch() method will automatically add the Content-Type: multipart/form-data request header since you passed the FormData object as the body parameter.

Submitting credentials using the Fetch API

By default, the Fetch API request does not contain user credentials such as cookies and HTTP-authentication headers. This is not typical for HTTP requests, as usually an HTTP request to the server contains all the cookies from that domain. But AJAX requests to a different origin made by JavaScript Fetch API calls are an exception.

This is for security reasons because a request with user authentication data allows JavaScript to act on behalf of the user and obtain private information using those credentials. To allow credentials to be sent to the server, you must explicitly set the 'credentials: "include"' parameter when calling the fetch() method, as shown in the example below. This will tell the browser to send credentials for both: same-origin and cross-origin calls. If you want to send credentials only to the origin domain, use the 'credentials: "same-origin"' parameter. And to prevent the browser from sending credentials altogether, use the 'credentials: "omit"'.

Fetch API Request with Bearer Token Authorization Header
fetch('https://reqbin.com/echo', {
  credentials: 'include'
})
   .then(resp => resp.text())
   .then( html => console.log(html))

If the server correctly processed the request with credentials, then it will send two CORS headers in response: Access-Control-Allow-Credentials: true and Access-Control-Allow-Origin: https://reqbin.com

Server response to Fetch API request with Credentials
HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://reqbin.com
Content-Type: text/html
Content-Length: 1000

[page html]

Last updated: Viewed: 1319 times