Take action once the Promise outside of the then block has been successfully completed

Question

Take action once the Promise outside of the then block has been successfully completed

Presented below is the code snippet:

function getPromise():Promise<any> {
    let p = new Promise<any>((resolve, reject) => {
        //some logical
        resolve(data);
    });
    p.finally(()=>{ 
        //I want do something when outside then finished! 
        console.log("finally hit");
    });
    return p;
}

function doPromise():void {
    a.getPromise().then(data => { console.log("then hit"); });
}

The issue here is that finally runs before then. How can I execute something after the outside then block?

I prefer not to add finally after each then statement due to multiple calls to the promise. Is there a way to handle this in a single place?

javascript typescript promise

Answer 1

Answer №1

To create a callback that can be utilized later on, you need to follow these steps:

type PromiseCallback = {
  p: Promise<any>;
  finalCallback: () => void;
}
function createPromise(): PromiseCallback {
  let p = new Promise((resolve, reject) => {
      //perform some operations
      resolve(data);
  });
  finalCallback(()=>{ 
      //Do something after the promise is resolved
      console.log("Finally executed");
  });
  return {p, finalCallback};
}

function executePromise():void {
  const {p: promise, finalCallback} = createPromise()
  promise().then(data => { 
    console.log("Executed 'then' block");  
    finalCallback();
  });
}

Answer 2

To create a callback that can be utilized later on, you need to follow these steps:

type PromiseCallback = {
  p: Promise<any>;
  finalCallback: () => void;
}
function createPromise(): PromiseCallback {
  let p = new Promise((resolve, reject) => {
      //perform some operations
      resolve(data);
  });
  finalCallback(()=>{ 
      //Do something after the promise is resolved
      console.log("Finally executed");
  });
  return {p, finalCallback};
}

function executePromise():void {
  const {p: promise, finalCallback} = createPromise()
  promise().then(data => { 
    console.log("Executed 'then' block");  
    finalCallback();
  });
}

Answer 3

Answer №2

Perhaps you could consider integrating a callback function into the getPromise method?


function getPromise(callback):Promise<any> {
    let p = new Promise<any>((resolve, reject) => {
        //perform some logic
        resolve(data);
    });
    p.then(callback)
    p.finally(()=>{ 
        //Execute code after then block completes 
        console.log("finally hit");
    });
    return p;
}

function doPromise():void {
    getPromise(data => { console.log("then hit"); });
}

Answer 4

Perhaps you could consider integrating a callback function into the getPromise method?


function getPromise(callback):Promise<any> {
    let p = new Promise<any>((resolve, reject) => {
        //perform some logic
        resolve(data);
    });
    p.then(callback)
    p.finally(()=>{ 
        //Execute code after then block completes 
        console.log("finally hit");
    });
    return p;
}

function doPromise():void {
    getPromise(data => { console.log("then hit"); });
}

Answer 5

Answer №3

When using your getPromise() function, keep in mind that it returns a Promise itself. This means that the code inside your .then() will only run once the promise has resolved, which in this case is after the .finally() block.

To organize your code better, you have the option to place the .then() within the getPromise() function or move the .finally() outside of it following the .then().

Answer 6

When using your getPromise() function, keep in mind that it returns a Promise itself. This means that the code inside your .then() will only run once the promise has resolved, which in this case is after the .finally() block.

To organize your code better, you have the option to place the .then() within the getPromise() function or move the .finally() outside of it following the .then().

Answer 7

Answer №4

Sorry, it's not possible. When you use promise.then(), a new promise is returned, and the original promise cannot access it directly (it's like a tree structure).

Instead of trying to reference the new promise from the original one, you can pass console.log("then hit") as a callback to the getPromise() function when creating the promise.


function getPromise(cb) {
    let p = new Promise((resolve, reject) => {
        //some logic here
        resolve();
    });
    p.then(cb).finally(() => { 
        //Do something after the outer then has completed
        console.log("finally hit");
    });
    
    return p;
}

function doPromise() {
    getPromise(data => { console.log("then hit"); });
}

doPromise()

Answer 8

Sorry, it's not possible. When you use promise.then(), a new promise is returned, and the original promise cannot access it directly (it's like a tree structure).

Instead of trying to reference the new promise from the original one, you can pass console.log("then hit") as a callback to the getPromise() function when creating the promise.


function getPromise(cb) {
    let p = new Promise((resolve, reject) => {
        //some logic here
        resolve();
    });
    p.then(cb).finally(() => { 
        //Do something after the outer then has completed
        console.log("finally hit");
    });
    
    return p;
}

function doPromise() {
    getPromise(data => { console.log("then hit"); });
}

doPromise()

Take action once the Promise outside of the then block has been successfully completed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The successful execution of one promise determines the outcome of the $q.all promise

Issue with Angularjs: NG-repeat and filter not functioning correctly on array

Just diving into JavaScript, what makes jQuery so powerful?

Run JavaScript code to retrieve the console log using Selenium WebDriver or WatiN

Is it feasible to amalgamate the states of several child components into a single parent component state in NextJS/React?

Angular: extracting value from forkJoin nested within another observable's pipe

What is the typical output value that fluctuates?

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

How come I keep running into the "is not a function" issue when trying to use the generateRequest function with Polymer's iron-ajax

Managing messaging broadcasts for messenger bots by creating and retrieving unique identifiers

Choose the initial offspring from a shared category and assign a specific class identifier

Identify the quantity of dynamically added <li> elements within the <ul> using jQuery

Retrieving parameters from the URL in Angular

Toggle display of divID using Javascript - Conceal when new heading is unveiled

Assistance with JavaScript Regular Expressions for formatting BBCode

Ways to disable an AJAX loading animation

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

An issue has occurred: it seems that the property cannot be accessed because `this.child` is undefined

The button's background color will vanish if you click anywhere outside the button or on the body of

The page refreshes automatically when the search icon is clicked, but the ajax method does not trigger the page reload