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?

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

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();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

export default class ReactApp extends React.Component { constructor(props) { super(props) this.state = { status: [], services: [] } fetchData((err,opt, data) => { function Exists(l ...

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

Currently in the process of creating a customized payment module for my django application and in need of some assistance. At the moment, I am using Stripe's Checkout for handling payments, but I find it restrictive as it doesn't allow for comple ...

The div element is persisting despite AJAX attempts to remove it

I am currently developing an application that allows users to post and comment. I have a situation where I need to delete a specific comment by clicking on the associated 'x' button. To achieve this, I am making an Ajax call to the remove-comme ...

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

Hello amazing minds of stackoverflow. I am in the process of converting three js mesh positions to html5 canvas positions. While I have successfully converted vector3 position to canvas position, I am facing difficulties with converting mesh rotation to ca ...

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

I am currently working on a private project using TypeScript and Yarn. In this project, I have developed a package that is meant to be utilized by one or more other applications. However, as I started to work on the consumer application, I encountered an ...

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

const express = require("express"); const expressAsyncHandler = require("express-async-handler"); const app = express(); const func = async () => { return false; }; app.get( "/", expressAsyncHandler(async () => ...

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

I've created a custom useStarRating hook to manage the state of a star rating component in my React project. Everything seems to be working properly, but I'm facing an issue with retrieving the updated value of currentValue after the user interac ...

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

On modern browsers, the following code works perfectly fine. However, on legacy browsers it throws an error. What is the best way to resolve this issue? Error: TypeError: Result of expression 'document.getElementById("profile").classList' [unde ...

AngularJS radio buttons are interactive HTML elements that allow users

I've been looking for a solution to bind my radio inputs to a model in a simple and clean way, but I haven't found one that works for me yet. In my HTML, I have: <input ng-model="searchByRma" type="radio" name="search-type"> <input ng-m ...

The tweet button is not displaying correctly on the website

Visit my website here, where I have integrated a tweet button generated from Twitter.com. It was working fine for the initial few posts, but now it is failing to load and only displaying text. I have checked the console for any JavaScript errors, but so f ...

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

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

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

I am interested in developing applications with a dynamic user interface that utilizes ajax technology. Some key features I am looking for include: Automatic saving of user input in forms, even if the data is incomplete Realtime validation of form fields ...

OBJ Raycasting in Three.js

Greetings! I encountered an issue while working with three.js in my project. Specifically, I was trying to select a custom mesh that I loaded from an OBJ file. To troubleshoot, I set up a simple raycaster, a cube, and my custom model (which is also a cube ...

redux - managing asynchronous storage using key-value pairs

Utilizing associative arrays with redux and storing them in async storage for later retrieval is my current challenge. When using redux, I am able to quickly access the values and efficiently map the content into cards in my react native app. However, aft ...

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

I'm attempting to give an error class to an input textbox to inform the user that their input is invalid. Within the change event, I am referencing what seems to be the input field and storing it in a variable. However, calling addClass on the var ...

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

I am currently working on creating a react native app that aims to simplify the user login process by allowing them to link their Google account with just one click. This way, users won't have to constantly log in every time they use the app. While I ...

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

Each time I click to fetch my content using an AJAX call, the calls end up duplicating themselves. I've tried various on-click events I came across on Stackoverflow threads, but unfortunately none of them seem to be solving the issue. $(document).rea ...

Retrieve the array from the response instead of the object

I need to retrieve specific items from my database and then display them in a table. Below is the SQL query I am using: public async getAliasesListByDomain(req: Request, res: Response): Promise<void> { const { domain } = req.params; const a ...

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

I am trying to create a drop down menu where each selection displays multiple elements. For example, if sensor 1 is chosen, I want to show a picture of its location and its address. I am having trouble figuring out how to add these functions to the drop ...

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

Here is the code snippet that is causing the issue of returning undefined items in AngularJS: App.js code console.log('single page application script is working'); var myApp = angular.module("demoApp", ["ngRoute", 'ui.bootstrap',&apos ...