How to resolve a promise multiple times?

Question

It might sound weird, but I'm looking for a way to resolve a promise multiple times. Are there any approaches to make this possible?

Think of the following example:

getPromise() {
  const event = new Event('myEvent');

  setTimeout(() => {
    window.dispatchEvent(event);
  }, 5000);

  setTimeout(() => {
    window.dispatchEvent(event);
  }, 7000);

  return new Promise((resolve) => {
    window.addEventListener('myEvent', () => {
      resolve('some value'));
    });

    resolve('some value'));
  });
};

And then .then():

getPromise().then(data => {console.log(data)})

Should give the following result:

some value // initial
some value // after 5000ms
some value // after 7000ms

So I know there are libraries to stream data, but I'm really looking for a native non-callbak approach to achieve this.

Answer 1

How to resolve a promise multiple times?

You can't. Promises can only be resolved once. Once they have been resolved, they never ever change their state again. They are essentially one-way state machines with three possible states pending, fulfilled and rejected. Once they've gone from pending to fulfilled or from pending to rejected, they cannot be changed.

So, you pretty much cannot and should not be using promises for something that you want to occur multiple times. Event listeners or observers are a much better match than promises for something like that. Your promise will only ever notify you about the first event it receives.

I don't know why you're trying to avoid callbacks in this case. Promises use callbacks too in their .then() handlers. You will need a callback somewhere to make your solution work. Can you explain why you don't just use window.addEventListener('myEvent', someCallback) directly since that will do what you want?

---

You could return a promise-like interface (that does not follow Promise standards) that does call its notification callbacks more than once. To avoid confusion with promises, I would not use .then() as the method name:

 function getNotifier() { const event = new Event('myEvent'); setTimeout(() => { window.dispatchEvent(event); }, 500); setTimeout(() => { window.dispatchEvent(event); }, 700); let callbackList = []; const notifier = { notify: function(fn) { callbackList.push(fn); } }; window.addEventListener('myEvent', (data) => { // call all registered callbacks for (let cb of callbackList) { cb(data); } }); return notifier; }; // Usage: getNotifier().notify(data => {console.log(data.type)})

Answer 2

I have a solution in Typescript.

export class PromiseParty {
  private promise: Promise<string>;
  private resolver: (value?: string | PromiseLike<string>) => void;
  public getPromise(): Promise<string> {
     if (!this.promise) {
        this.promise = new Promise((newResolver) => { this.resolver = newResolver; });
     }
        return this.promise;
   }
   public setPromise(value: string) {
      if(this.resolver) {
         this.resolver(value);
         this.promise = null;
         this.resolver = null;
      }
   }
}

export class UseThePromise {
   public constructor(
       private promiseParty: PromiseParty
   ){
      this.init();
   }
   private async init(){
      const subscribe = () => {
         const result = await this.promiseParty.getPromise();
         console.log(result);
         subscribe(); //resubscribe!!
      }
      subscribe(); //To start the subscribe the first time
   }  
}


export class FeedThePromise {
   public constructor(
      private promiseParty: PromiseParty
   ){
        setTimeout(() => {
           this.promiseParty.setPromise("Hello");
        }, 1000);
        setTimeout(() => {
           this.promiseParty.setPromise("Hello again!");
        }, 2000);

        setTimeout(() => {
           this.promiseParty.setPromise("Hello again and again!");
        }, 3000);
    }
 }