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

Retrieve the dynamically generated element ID produced by a for loop and refresh the corresponding div

What is the best way to modify an array within separate functions in a NodeJS environment?

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

Encountering cross-domain issues while integrating AngularJS in flex (web control), and trying to retrieve templates/json (local files)

Guide on displaying a grid in the center of the screen with a vertical sliding feature

Next.js is failing to infer types from getServerSideProps to NextPage

Importing a newly harvested array from a .js file (array that has been exported)

What are your thoughts on using inline PHP to assign values to JavaScript variables?

Encountering issues with displaying the JSON response in the table, receiving an undefined error

Searching Firebase by using comparison operators on various fields

Caution: Highlighting Non-ASCII Characters in Your Django Form

Ways to successfully pass multiple parameters in Nuxt

Show the dropdown menu with names from the array in the ajax response

Using the ESNEXT, Gutenberg provides a way to incorporate repeater blocks that

Can anyone suggest a more efficient method for detecting expired SESSIONS in JQuery?

Express functions properly when handling the root route, but encounters issues with sub routes as it sends empty response bodies

Choosing one item from an array to showcase in a view [Angular]

The JSON.parse function encounters issues when trying to parse due to a SyntaxError: Unexpected character found after JSON at position 2, causing it to be unable

Isolating Express.js Requests for Enhanced Security

Transform an array into an array of objects using the reduce method