A step-by-step guide on accessing an API to check the status updates of ongoing API calls

Question

A step-by-step guide on accessing an API to check the status updates of ongoing API calls

I'm facing an issue with making two API calls concurrently. The goal is to have call X executed first, while Y should run in parallel and keep calling itself recursively until the X API resolves. Both calls should be initiated immediately upon clicking a button.

function X () {
return new Promise((resolve,reject) => {
Service.requestAPI(RequestMethod.GET, API_URL.validateProductStatus)
      .then(response => {
resolve(response)
} 
}
}

function Y () {
Service.requestAPI(RequestMethod.GET, API_URL.validateProductStatus)
      .then(response => {
        if(response){
          setTimeout(() => {
            this.onStatusChange()
          },1000)
}
} 
}

async function buttonCLick() {
const XResponse = await X();
Y();
}

The current implementation is not working as expected. The second call, Y, is being treated as a synchronous call instead of asynchronous. What could be causing this issue?

javascript promise async-await

Answer 1

Answer №1

When using the await keyword, it essentially pauses the execution of a function until an asynchronous call is completed. Your code snippet seems to be missing some crucial elements to offer a tailored solution for your specific scenario. Generally speaking, when you want to perform async processing while updating dynamic statuses, you will either need to utilize callbacks or work with streams.

let sleep = ms => new Promise(r => setTimeout(r, ms));

let doAsyncWork = async onProgress => {
  let n = 100;
  for (let i = 0; i < n; i++) {
    await sleep(Math.random() * 100);
    onProgress(i / n);
  }
  onProgress(1);
};

let updateProgress = progress => {
  document.querySelector('div').textContent = progress < 1 ? 
    `Working, ${progress * 100}%` :
    `Complete!`;
};

doAsyncWork(updateProgress);

<div></div>

Answer 2

When using the await keyword, it essentially pauses the execution of a function until an asynchronous call is completed. Your code snippet seems to be missing some crucial elements to offer a tailored solution for your specific scenario. Generally speaking, when you want to perform async processing while updating dynamic statuses, you will either need to utilize callbacks or work with streams.

let sleep = ms => new Promise(r => setTimeout(r, ms));

let doAsyncWork = async onProgress => {
  let n = 100;
  for (let i = 0; i < n; i++) {
    await sleep(Math.random() * 100);
    onProgress(i / n);
  }
  onProgress(1);
};

let updateProgress = progress => {
  document.querySelector('div').textContent = progress < 1 ? 
    `Working, ${progress * 100}%` :
    `Complete!`;
};

doAsyncWork(updateProgress);

<div></div>

Answer 3

Answer №2

await will pause the program's execution until X is resolved. One method to accomplish this is by using a shared variable that determines whether or not to execute Y:

let callY = true;

const x = () => {
  return new Promise((resolve, reject) => {
    // make an API call
    setTimeout(() => resolve("X has been resolved"), 3000);
  });
};

const y = () => {
  if (callY) {
    console.log("waiting for X");
    // make an API call
    // recursively call the function after resolving based on the response
    setTimeout(() => y(), 1000); // calling the function after 3 seconds
  }
};

async function buttonClick() {
  x().then(res => {
    console.log(res);
    callY = false;
  });
  
  y();
}

buttonClick();

Answer 4

await will pause the program's execution until X is resolved. One method to accomplish this is by using a shared variable that determines whether or not to execute Y:

let callY = true;

const x = () => {
  return new Promise((resolve, reject) => {
    // make an API call
    setTimeout(() => resolve("X has been resolved"), 3000);
  });
};

const y = () => {
  if (callY) {
    console.log("waiting for X");
    // make an API call
    // recursively call the function after resolving based on the response
    setTimeout(() => y(), 1000); // calling the function after 3 seconds
  }
};

async function buttonClick() {
  x().then(res => {
    console.log(res);
    callY = false;
  });
  
  y();
}

buttonClick();

A step-by-step guide on accessing an API to check the status updates of ongoing API calls

Answer №1

Answer №2

Similar questions

"Enhancing user experience with React.js and Socket.io: dynamically updating list item positions based on

Can you provide me with a step-by-step guide on how to implement Stripe's Custom Payment feature

The div element is persisting despite AJAX attempts to remove it

Changing the rotation of an object in THREE.js to match Canvas rotation

Encountering an issue with TS / yarn where an exported const object cannot be utilized in a consuming

Having difficulties with implementing the throw await syntax in an async express handler in Node.js

The useStarRating() hook continues to display 0 even after the user has interacted with the star component

How can you bypass classList being `undefined` in older browsers?

AngularJS radio buttons are interactive HTML elements that allow users

The tweet button is not displaying correctly on the website

Angular error: Trying to assign a value of type ArrayBuffer to a string type

I'm looking for some good .NET MVC frameworks that can help create dynamic AJAX applications

OBJ Raycasting in Three.js

redux - managing asynchronous storage using key-value pairs

Trouble with jQuery addClass function when trying to add to a specific object variable

Looking for reliable resources on establishing a connection between a Google account and my application

Whenever the click event is triggered, Ajax is making numerous duplicate calls

Retrieve the array from the response instead of the object

Creating a dynamic dropdown menu in HTML to showcase a variety of images

Unexpected results occur when accessing data in $uibModal.open() within Angular JS causing it to