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

"Retrieve a specific object from a JSON file using NextJS based on its ID

Please input new items by clicking a button

What purpose does the array.pop()!(object) syntax serve within Codemirror?

Retrieve all items pertaining to a specific week in the calendar

Tips for implementing lazy loading for a section of a template in Angular 2

What is the best way to make a JSONP request using jQuery?

Inaccurate recommendations for type safety in function overloading

Utilizing .html() to convert JSON data into HTML content

The art of selecting elements and attaching event listeners in a React environment

Redux state not reflecting changes until second click

When attempting to access endpoints from other computers, the connection to Express.js is being refused

Access the value within an object that contains an array and compare it with a different array

The .push method in Javascript is failing to execute

Refining Generic Types in TypeScript

Manipulating the DOM to show various elements upon clicking on text

What are the Typescript object types where the keys are functions that take a single generic argument consistently?

Having two identical select2 forms on the same page

Can you explain the concept of the "one true source"?

What is the best way to incorporate Javascript into jQuery tabs?

Vue.js - Error: Module not found: Cannot locate module 'lottie-vuejs'