A guide to creating a synchronous AJAX call using vanilla JavaScript

Question

A guide to creating a synchronous AJAX call using vanilla JavaScript

I am trying to make multiple AJAX calls in a loop using the code below.

for (var i = 0; i < 5; i++) {
  console.log(i);
  ajax_DatabaseAccessor.query("CheckInt", i, loadQuery);
  function loadQuery(data) {
    alert(DWRUtil.toDescriptiveString(data, 2));
  }
}

After debugging the code, I noticed that the log was written five times before the AJAX calls were executed, and the parameter being passed is always 4. This discrepancy makes me believe that this is due to the asynchronous nature of the call. How can I modify the code to make it synchronous? I am aware that jQuery has an option to set async to false, but I want to achieve this in plain JavaScript without relying on jQuery. Thank you.

javascript ajax

Answer 1

Answer №1

If you want to make asynchronous code behave like synchronous code when using a for loop, the best approach these days is to utilize the async/await syntax.

To achieve this, you can modify your ajax_DatabaseAccessor.query function to return a promise by turning it into an async function. For example:

let ajax_DatabaseAccessor = {}
ajax_DatabaseAccessor.query = async (idk, someIdea, someSelector) => {
    let response = await fetch("some_resource/"+idk+"/"+someIdea)
    let data = await response.json();
    return someSelector(data)
}

Now that your code is awaitable, you can incorporate it within your for loop as follows:

for(var i = 0 ;i<5;i++){
  let myDescriptiveString = await ajax_DatabaseAccessor.query("CheckInt", i,  (data)=>DWRUtil.toDescriptiveString(data, 2));  
}

In essence, the solution to your query suggests exploring the use of fetch and async/await due to their compatibility with for loops. It may also be beneficial to understand how to create an awaitable function by working with Promise objects, which are capable of being awaited on.

Answer 2

If you want to make asynchronous code behave like synchronous code when using a for loop, the best approach these days is to utilize the async/await syntax.

To achieve this, you can modify your ajax_DatabaseAccessor.query function to return a promise by turning it into an async function. For example:

let ajax_DatabaseAccessor = {}
ajax_DatabaseAccessor.query = async (idk, someIdea, someSelector) => {
    let response = await fetch("some_resource/"+idk+"/"+someIdea)
    let data = await response.json();
    return someSelector(data)
}

Now that your code is awaitable, you can incorporate it within your for loop as follows:

for(var i = 0 ;i<5;i++){
  let myDescriptiveString = await ajax_DatabaseAccessor.query("CheckInt", i,  (data)=>DWRUtil.toDescriptiveString(data, 2));  
}

In essence, the solution to your query suggests exploring the use of fetch and async/await due to their compatibility with for loops. It may also be beneficial to understand how to create an awaitable function by working with Promise objects, which are capable of being awaited on.

A guide to creating a synchronous AJAX call using vanilla JavaScript

Answer №1

Similar questions

I need the inner HTML of the AJAX response to be displayed in the <tr>

Storing data with ElectronJS

Customize your select element's background using jQuery when the content changes

What could be the reason for the error message when using rs.send with a string input?

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

Creating a seamless scrolling experience with a designated stopping point - here's how to achieve it!

Having trouble establishing a connection from regular JavaScript to a socket.io backend? Face the issue of connection closure before

What could be causing the "keyframes method" in my css to not function correctly?

The parsing of Jquery ajax xml is not working as expected

Is there a way to prevent the Material UI Chip component from appearing when there is no content present?

Refreshing a div using Php and ajax at specific intervals

Is there a substitute for useState in a Next.js server component?

Move the absolute div by sliding it to the left from 120% to -10px

How can you ensure in Typescript that a function parameter belongs to a specific set of enumerated values?

Retrieving data and selecting tables using jQuery

Unable to write to file due to permission restrictions from EPERM. Will delete existing file and create a new one. This action

Converting an array into a string, transitioning from PHP to JavaScript

implementation of an Ajax countdown timer on an ASP.NET webpage

Specify the location of the resize button (corner)

Ways to automatically change a URL into a clickable link upon pasting