How to use fetch function to make HTTP requests from Javascript?

Hello everyone and welcome to my blog. In today’s blog I will show how you can make GET and POST requests from Javascript using the fetch function instead of using the very popular XMLHttpRequest.

fetch function was introduced way back in 2015 as a modern successor to XMLHttpRequest. fetch returns a Promise and provide a cleaner way handling requests and responses than traditional XMLHttpRequest

I am addicted to Dynamics 365 and Power Platform and to test the functionality, I will use the REST API endpoints of DataVerse. Also any readers from Dynamics 365 and Power Platform space, please note that you can execute WebAPI calls of DataVerse using fetch instead of XMLHttpRequest.

Below is an example of GET operation in action using the fetch function. Isn’t it much simpler?

fetch("https://orgbb2b2550.crm.dynamics.com/api/data/v9.2/accounts").then(
   response => {

      const responseBody = response.json().then(
         data => {
            if (data.error) {
               console.log(data.error.message);
            }
            else {
               var jsonResult = JSON.stringify(data);
            }
         }
      )
   }
)

If it is seemingly complex because of the use of arrow functions, below is the same code using closure functions.

fetch("https://orgbb2b2550.crm.dynamics.com/api/data/v9.2/accounts").then(

   function (response) {
      response.json().then(function (data) {
         if (data.error) {
            console.log(data.error.message);
         }
         else {
            let jsonResult = JSON.stringify(data);
         }
      })
   }
)

You will need to change the URL and the parsing logic accordingly as per your requirement. Observe how the above code handle any error thrown by fetch during invocation of HTTP Calls.

An important thing to note here is for error, there is no error callback function. It’s the same PROMISE callback and you need to check for error in the response body as shown in the above code.

Well that’s good for starter. Howe about a GET request with headers? Below is the example code for the same.

// JavaScript source code
let options = {
   headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
   }
};

fetch("https://orgbb2b2550.crm.dynamics.com/api/data/v9.2/accounts", options).then(
   response => {

      const responseBody = response.json().then(
         data => {
            if (data.error) {
               console.log(data.error.message);
            }
            else {
               var jsonResult = JSON.stringify(data);
            }
         }
      )
   }
)

GET is fine. What about a POST request. Below is an example of POST request.

// JavaScript source code

let payload = {
   "name": "fetch test account",
   "websiteurl": "https://fetchtest.com"
};

let options = {
   body: JSON.stringify(payload),
   method: 'POST',
   headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
   }
};

fetch("https://orgbb2b2550.crm.dynamics.com/api/data/v9.2/accounts", options).then(
   response => {
      debugger;
      const responseBody = response.json().then(
         data => {
            if (data.error) {
               console.log(data.error.message);
            }
            else {
               var jsonResult = JSON.stringify(data);
            }
         }
      )
   }
)

Quite simple. Isn’t it? All we need to do is to specify the method to POST and pass the request body in the body property of the options object.

You can similarly execute PUT, PATCH and DELETE requests using the fetch API.

Hope you learnt something new today. For similar tips on Microsoft technologies and Power Platform, please subscribe to my blog.

You will also like the below posts.

Debajit Dutta
Business Solutions MVP