kaksha.dev

---

Fetch API

Fetch api is used making http network request and handling the responses

• Standard fetch api explanation

// Standard GET API call
fetch("http://localhost:8080").then(response => {
    console.log("The success api response is: ", success)
}, error => {
    console.log("The error api response is: ", error)
})

// Standard POST API call
let requestData = { name: "name1" };
fetch("http://localhost:8080", {
  method: "POST",
  body: JSON.stringify(requestData),
}).then(
  (response) => {
    console.log("The success api response is: ", success)
  },
  (error) => {
    console.log("The error api response is: ", error)
  }
);

• Custom fetch implementation using standard XMLHttpRequest browser api

let promiseXml;
function customFetch(url, resolve, reject) {
  promiseXml = new Promise(executor);

  function executor(resolve, reject) {
    var xmlHttpRequest1 = new XMLHttpRequest();
    xmlHttpRequest1.onreadystatechange = function () {
      if (XMLHttpRequest.DONE) {
        if (this.status === 200) {
          console.log("Data fetched", this.responseText);
          // document.getElementById("demo").innerHTML = this.responseText;
          resolve();
        } else {
          console.log("Data not fetched");
        }
      }
    };
    xmlHttpRequest1.open("GET", url, true);
    xmlHttpRequest1.send();
  }

  return promiseXml;
}

customFetch("http://localhost:8080");