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

The issue with ng-if not functioning within ng-repeat is that the ng-if directive

Issues within jQuery internal workings, implementing improved exception handling for fn.bind/fn.apply on draggable elements

Guide on exporting a function from a module as a class property

Determining the file size of an HTML and JavaScript webpage using JavaScript

React does not automatically re-render components created with the built-in function

What is the best method to determine the currency associated with the code in dinero.js?

Halt and anticipate a boolean reply from another function

How can I change an icon and switch themes using onClick in react js?

Encountered a 'Topology is closed' error while using EJS

The JavaScript promise remains in limbo, neither resolving nor rejecting, seemingly stuck for unknown reasons

Troubleshooting issue with refreshing selectpicker in Bootstrap-select and Vue.js

The functionality of the button is disabled once a pop-up JavaScript is implemented

Scroll bar malfunction in Highcharts

Dispatch an angular POST Request

Is there a way to identify if you are at the bottom row of a column defined by CSS styling?

The instance is referencing "underscore" during render, but it is not defined as a property or method

What could be causing the malfunction of this Bootstrap button dropdown?

Is there a way to eliminate text from a barcode image using JavaScript or TypeScript?

Why does the function yield two distinct outcomes?

The functionality of jQuery.hover with AJAX is malfunctioning