Leveraging promises to make Ajax calls without repeating code

Question

Leveraging promises to make Ajax calls without repeating code

Would it be possible to create an ajax function without duplicating it? Passing different parameters, which are locations to various files. Then utilizing the promise to combine them into a single object, possibly incorporating the spread operator. Is this achievable?

var myFunctionCalls = 0;

let promiseAjax = new Promise(function(resolve, reject) {

//Could we potentially use a for loop to determine how many times the loadDoc function was called and then push the results to an array?
    function loadDoc(location) {
        myFunctionCalls++;
        console.log("loadDoc was called: " + myFunctionCalls);

        var xyz = new XMLHttpRequest();
        xyz.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);          
            }
        };

        xyz.open("GET", location, true);
        xyz.send();
    }

    loadDoc("/_js/someitems.json");
    loadDoc("/_js/someMoreItems.json");
})

// Combine the responses into one object using spread operators
promiseAjax.then(function(fromResolve){

    var newObj = JSON.parse(fromResolve);
    console.log(newObj);

})

javascript ajax es6-promise

Answer 1

Answer №1

using the power of Promise.all along with Object.assign,

function fetchContent(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (this.readyState == 4 && this.status == 200) {
        resolve(JSON.parse(this.responseText));
      } else {
        // resolving with empty object to prevent breaking other requests
        resolve({});
      }
    };

    xhr.open("GET", url, true);
    xhr.send();
  });
}

const fetchContents = (urls) => Promise.all(urls.map(url => fetchContent(url))
  .then(results => {
    // merge all results into a single object
    return Object.assign({}, ...results);
  }));

// usage example
fetchContents([
  "/data/some-data.json",
  "/data/more-data.json"
]).then(function(combinedData) {
  // additional logic here
});

Answer 2

using the power of Promise.all along with Object.assign,

function fetchContent(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (this.readyState == 4 && this.status == 200) {
        resolve(JSON.parse(this.responseText));
      } else {
        // resolving with empty object to prevent breaking other requests
        resolve({});
      }
    };

    xhr.open("GET", url, true);
    xhr.send();
  });
}

const fetchContents = (urls) => Promise.all(urls.map(url => fetchContent(url))
  .then(results => {
    // merge all results into a single object
    return Object.assign({}, ...results);
  }));

// usage example
fetchContents([
  "/data/some-data.json",
  "/data/more-data.json"
]).then(function(combinedData) {
  // additional logic here
});

Answer 3

Answer №2

To combine the results of two asynchronous calls and manipulate the resolved data as needed, you can utilize Promise.all().

function fetchData(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      }
    };
    xhr.open("GET", url, true);
    xhr.send();
  });
}

const endpoints = ["/data/first.json", "/data/second.json"];
Promise.all(endpoints.map(endpoint => fetchData(endpoint))).then(responses =>
  console.log(responses);
)

Answer 4

To combine the results of two asynchronous calls and manipulate the resolved data as needed, you can utilize Promise.all().

function fetchData(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        resolve(this.responseText);
      }
    };
    xhr.open("GET", url, true);
    xhr.send();
  });
}

const endpoints = ["/data/first.json", "/data/second.json"];
Promise.all(endpoints.map(endpoint => fetchData(endpoint))).then(responses =>
  console.log(responses);
)

Answer 5

Answer №3

To simplify the process, one can define asynchronous functions that return promises and are easily transferable and recyclable.

An example implementation could be as follows:

async function downloadData(data) {
   ...
   return {...downloadedData};
}

async function processData() {
    const data1 = await downloadData('data1');
    const data2 = await downloadData('data2');
    return {...data1, ...data2};
}

processData().then((combinedData) => {
  ...
})

These functions are versatile, accepting arguments and offering reusability just like any other standard function.

Answer 6

To simplify the process, one can define asynchronous functions that return promises and are easily transferable and recyclable.

An example implementation could be as follows:

async function downloadData(data) {
   ...
   return {...downloadedData};
}

async function processData() {
    const data1 = await downloadData('data1');
    const data2 = await downloadData('data2');
    return {...data1, ...data2};
}

processData().then((combinedData) => {
  ...
})

These functions are versatile, accepting arguments and offering reusability just like any other standard function.

Answer 7

Answer №4

This particular behavior can be achieved using Promise.all along with the power of Promise.all, as well as leveraging the combination of async+await async. Implementing more modern calls like fetch can greatly enhance the readability and cleanliness of the code.

async function loadAll(docs) {
    return Promise.all(docs.map(async doc => {
        const result = await fetch('http://example.com/movies.json');
        return result.json();
    }));
}

(async function() {
    const responses = await loadAll(["/_js/someitems.json", "/_js/someMoreItems.json"]);
    console.log(responses);
})();

Please note: the use of await is restricted to async functions only. Note2: It's important to mention that this code has not been thoroughly tested.

Answer 8

This particular behavior can be achieved using Promise.all along with the power of Promise.all, as well as leveraging the combination of async+await async. Implementing more modern calls like fetch can greatly enhance the readability and cleanliness of the code.

async function loadAll(docs) {
    return Promise.all(docs.map(async doc => {
        const result = await fetch('http://example.com/movies.json');
        return result.json();
    }));
}

(async function() {
    const responses = await loadAll(["/_js/someitems.json", "/_js/someMoreItems.json"]);
    console.log(responses);
})();

Please note: the use of await is restricted to async functions only. Note2: It's important to mention that this code has not been thoroughly tested.

Answer 9

Answer №5

A positive approach would be to share the URL, parameters, and the type of AJAX call (POST, GET, etc) with the method. By doing so, you can effectively utilize the same method for various tasks from your client side by making a single method call.

This content has been referenced from:

https://medium.com/front-end-weekly/ajax-async-callback-promise-e98f8074ebd7

function makeAjaxCall(url, methodType)
{
 var promiseObj = new Promise(function(resolve, reject)
 {
  var xhr = new XMLHttpRequest();
  xhr.open(methodType, url, true);
  xhr.send();
  xhr.onreadystatechange = function()
  {
   if (xhr.readyState === 4)
   {
    if (xhr.status === 200)
    {
     console.log("xhr done successfully");
     var resp = xhr.responseText;
     var respJson = JSON.parse(resp);
     resolve(respJson);
    }
    else
    {
     reject(xhr.status);
     console.log("xhr failed");
    }
   }
   else {console.log('xhr processing going on');}
  }
  console.log("request sent succesfully");
 });
 return promiseObj;
}
enter code here
document.getElementById('userDetails').addEventListener('click', function()
{
 // git hub url to get btford details
 var userId = document.getElementById("userId").value;
 var URL = "https://api.github.com/users/"+userId;
 makeAjaxCall(URL, "GET").then(processUserDetailsResponse, errorHandler);
});

You can also pass a callback method to it, along with an error-handling technique.

function makeAjaxCall(url, methodType, callback)
{
  $.ajax(
  {
   url : url,
   method : methodType,
   dataType : "json",
   success : callback,
   error : function (reason, xhr){
   console.log("error in processing your request", reason);
  }
 });
}
// git hub url to get btford details
var URL = "https://api.github.com/users/btford";
makeAjaxCall(URL, "GET", function(respJson)
{
 document.getElementById("userid").innerHTML = respJson.login;
 document.getElementById("name").innerHTML = respJson.name;
 document.getElementById("company").innerHTML = respJson.company;
 document.getElementById("blog").innerHTML = respJson.blog;
 document.getElementById("location").innerHTML = respJson.location;
});

Answer 10

A positive approach would be to share the URL, parameters, and the type of AJAX call (POST, GET, etc) with the method. By doing so, you can effectively utilize the same method for various tasks from your client side by making a single method call.

This content has been referenced from:

https://medium.com/front-end-weekly/ajax-async-callback-promise-e98f8074ebd7

function makeAjaxCall(url, methodType)
{
 var promiseObj = new Promise(function(resolve, reject)
 {
  var xhr = new XMLHttpRequest();
  xhr.open(methodType, url, true);
  xhr.send();
  xhr.onreadystatechange = function()
  {
   if (xhr.readyState === 4)
   {
    if (xhr.status === 200)
    {
     console.log("xhr done successfully");
     var resp = xhr.responseText;
     var respJson = JSON.parse(resp);
     resolve(respJson);
    }
    else
    {
     reject(xhr.status);
     console.log("xhr failed");
    }
   }
   else {console.log('xhr processing going on');}
  }
  console.log("request sent succesfully");
 });
 return promiseObj;
}
enter code here
document.getElementById('userDetails').addEventListener('click', function()
{
 // git hub url to get btford details
 var userId = document.getElementById("userId").value;
 var URL = "https://api.github.com/users/"+userId;
 makeAjaxCall(URL, "GET").then(processUserDetailsResponse, errorHandler);
});

You can also pass a callback method to it, along with an error-handling technique.

function makeAjaxCall(url, methodType, callback)
{
  $.ajax(
  {
   url : url,
   method : methodType,
   dataType : "json",
   success : callback,
   error : function (reason, xhr){
   console.log("error in processing your request", reason);
  }
 });
}
// git hub url to get btford details
var URL = "https://api.github.com/users/btford";
makeAjaxCall(URL, "GET", function(respJson)
{
 document.getElementById("userid").innerHTML = respJson.login;
 document.getElementById("name").innerHTML = respJson.name;
 document.getElementById("company").innerHTML = respJson.company;
 document.getElementById("blog").innerHTML = respJson.blog;
 document.getElementById("location").innerHTML = respJson.location;
});

Leveraging promises to make Ajax calls without repeating code

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having trouble resolving this technical problem in Express.js and JavaScript programming

TypeScript - Indexable Type

Utilize Chrome storage instead of localstorage to generate Parse sessions

Tips for structuring route dependencies in Node.js and Express

What is the best way to implement a CSS transition for styles that are dynamically created by React?

Tips for decreasing the width of a Grid column in MUI React

What are some effective methods for troubleshooting unidentified JavaScript functions within Chrome's performance analyzer?

Ways to highlight a form field only when there is data in my variable

Issues with importing files have been reported on Node.js version 11.8.0

Utilizing Array Elements to Populate the Title Attribute in <TD> Tags

Is there a way to incorporate PHP code into HTML using JavaScript?

Using a string as a query parameter in Javascript/AngularJS

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Displaying text that follows the cursor on a JavaScript mouseover event

Once the ajax request is finished, load only the <script> tags that have specific ids

The Role of Filling in a Process

Rendering sibling components on Multiple Select Material UI in React

Error message encountered in Express.js when trying to apply the ejs function: "View is not a constructor"

Mastering the art of exchanging cross-domain ajax data in userscripts