What is causing my function to not wait for the resolution of the Promise?

Question

What is causing my function to not wait for the resolution of the Promise?

checkout.ts

updateGlobalValue(){
   updateShadowDomButton(); 
   let globalValue = fetchGlobalValue()
}

web_component_render.ts

let globalValue; 

async fetchData() {
   let booleanFromApi = await callToExternalAPI(); 
   return booleanFromApi; 
}

function updateShadowDOMButton() {
    fetchData.then((booleanFromApi) => {
        globalValue = booleanFromApi;
    })
}

export function fetchGlobalValue() {
    return globalValue;
}

I need to ensure that I retrieve the boolean after the asynchronous call is finished. My assumption was that .then would guarantee that the block of code in then will be executed after the promise resolves. However, while waiting for the execution of the callToExternalAPI, it progresses and retrieves the globalValue. The new global value is then updated once the async call is complete. How can we make sure that the asyncFunction call finishes before retrieving the globalValue?

javascript async-await promise callback asynccallback

Answer 1

Answer №1

Let's break down and analyze the flow of your code:

renderButton(){
   renderShadowDomButton(); 
   let globalValue = getGlobalValue()
}

When renderShadowDomButton() is called, it initiates an API call in asyncFunction. Meanwhile, JS proceeds to execute

let globalValue = getGlobalValue()

. As a result, globalValue remains undefined since the API call is still ongoing.

To ensure sequential execution, consider the following approach:

web_component_render.ts

let globalValue; 

async asyncFunction() {
   return await someExternalAPICall(); 
}

async function renderShadowDOMButton() {
    globalValue = await asyncFunction();
}

export function getGlobalValue() {
    return globalValue;
}

checkout.ts

async renderButton(){
   await renderShadowDomButton(); 
   const globalValue = getGlobalValue()
}

Furthermore, here's a more streamlined refactor:

checkout.ts

async renderButton(){
   const globalValue = await getGlobalValue(); 
}

web_component_render.ts

export function getGlobalValue() {
    return await someExternalAPICall();
}

Opt for proper scoping to avoid using global variables within the same file. Also, remember to account for JavaScript's asynchronous nature.

Answer 2

Let's break down and analyze the flow of your code:

renderButton(){
   renderShadowDomButton(); 
   let globalValue = getGlobalValue()
}

When renderShadowDomButton() is called, it initiates an API call in asyncFunction. Meanwhile, JS proceeds to execute

let globalValue = getGlobalValue()

. As a result, globalValue remains undefined since the API call is still ongoing.

To ensure sequential execution, consider the following approach:

web_component_render.ts

let globalValue; 

async asyncFunction() {
   return await someExternalAPICall(); 
}

async function renderShadowDOMButton() {
    globalValue = await asyncFunction();
}

export function getGlobalValue() {
    return globalValue;
}

checkout.ts

async renderButton(){
   await renderShadowDomButton(); 
   const globalValue = getGlobalValue()
}

Furthermore, here's a more streamlined refactor:

checkout.ts

async renderButton(){
   const globalValue = await getGlobalValue(); 
}

web_component_render.ts

export function getGlobalValue() {
    return await someExternalAPICall();
}

Opt for proper scoping to avoid using global variables within the same file. Also, remember to account for JavaScript's asynchronous nature.

Answer 3

Answer №2

When using the renderShadowDOMButton function, keep in mind that it is asynchronous, meaning the code following it will continue to run without waiting for it to complete.

If you need the value to be retrieved only after the asynchronous function finishes, you can use the following approach:

async renderButton(){
   await renderShadowDomButton(); 
   const globalValue = getGlobalValue()
}

This method should help resolve any issues and ensure the execution halts until the async operation is finalized.

Answer 4

When using the renderShadowDOMButton function, keep in mind that it is asynchronous, meaning the code following it will continue to run without waiting for it to complete.

If you need the value to be retrieved only after the asynchronous function finishes, you can use the following approach:

async renderButton(){
   await renderShadowDomButton(); 
   const globalValue = getGlobalValue()
}

This method should help resolve any issues and ensure the execution halts until the async operation is finalized.

Answer 5

Answer №3

Transitioning from utilizing async/await to .then() does not automatically transform the asynchronous behavior of the code into a synchronous one. The invocation of .then() remains non-blocking, allowing you to merely establish a callback function. Despite setting up the callback, you still need to await its completion before proceeding to the subsequent statement.

I could propose some alternative approaches here and there, but they would simply involve employing promises in a "smart" manner. It is best to stick with asynchronous programming throughout, as both NodeJS and modern browsers fully support async programming, inclusive of top-level await.

Answer 6

Transitioning from utilizing async/await to .then() does not automatically transform the asynchronous behavior of the code into a synchronous one. The invocation of .then() remains non-blocking, allowing you to merely establish a callback function. Despite setting up the callback, you still need to await its completion before proceeding to the subsequent statement.

I could propose some alternative approaches here and there, but they would simply involve employing promises in a "smart" manner. It is best to stick with asynchronous programming throughout, as both NodeJS and modern browsers fully support async programming, inclusive of top-level await.

What is causing my function to not wait for the resolution of the Promise?

Answer №1

Answer №2

Answer №3

Similar questions

Unable to retrieve the value of ng-model using $scope

Exploring the Relationship Between jQuery and JSON through Iterating Over JSON Arrays

Is there a way to showcase a PDF file using pdftron through npm?

Update WooCommerce Mini-cart with ajax refresh

Encountered an error when attempting to submit with Node.js and Express.js connected to MySql - "Cannot POST /login

In Javascript, you can compare an array with a nested array and then store the values in a new array

Assigning a CSS class during the $routeChangeStart event does not activate the animation, unless it is placed within a setTimeout function

Can you guide me on how to establish a cookie within a selenium webdriver javascript script?

What do you think of the unique JSON syntax found in the React-Redux-Firebase documentation? Valid or not?

Using Express.js to transform req.body into a POST encoded string

When the React application loads, loadingbar.js will be mounted initially. However, as the props or states are updated, the object

Sending messages through a Discord Bot without the use of a command

What is the best way to incorporate various styles into one :style attribute?

Leveraging the power of map in an Angular typescript file

The REST request is preventing the JavaScript on the page from executing

Tips for obtaining a variable step size in react-chartjs-2

The function grunt.task.run() is malfunctioning

What is the best way to pass a bind value in an Angular function controller?

Using Javascript to create bold text within a string

Working with ng-model on an array with multiple dimensions