How to define a promise chain without using then method

Question

I already looked for similar questions, but they are related to JQuery or any other library.

First, I wrote this:

const printIn1Sec = (value) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 1000)
  });
};

And used it in this way:

printIn1Sec(1)
.then(() => printIn1Sec(2))
.then(() => printIn1Sec(3));

I think then is very important, because it allows us to execute something as soon as the promise is resolved.

But I was looking for something like this:

printIn1Sec(1)
.printIn1Sec(2)
.printIn1Sec(3);

I noticed I needed an object with access to this printIn1Sec method. So I defined a class:

class Printer extends Promise {
  in1Sec(v) {
    return this.then(() => this.getPromise(v));
  }

  getPromise(value) {
    return new Printer(resolve => {
      setTimeout(() => {
        console.log(value);
        resolve();
      }, 1000)
    })
  }
}

And used it this way:

Printer.resolve().in1Sec(1).in1Sec(2).in1Sec(3);

I had to resolve the Promise from the beginning, in order to the start the chain. But it still bothers me.

Do you think, is there a way to get it working like the following?

printIn1Sec(1).printIn1Sec(2).printIn1Sec(3);

I was thinking in a new class or method, that could receive these values, store them, and finally start resolving the chain. But it would require to call an aditional method at the end, to init with the flow.

Answer 1

If you really wanted to create a chainable interface as in your question, this would do it:

const printIn1Sec = (function() {

  function setTimeoutPromise(timeout) {
    return new Promise(resolve => setTimeout(resolve, 1000));
  }

  function printIn1Sec(value, promise) {
    const newPromise = promise
      .then(() => setTimeoutPromise(1000))
      .then(() => console.log(value));

    return {
      printIn1Sec(value) {
        return printIn1Sec(value, newPromise);
      },
    };
  }

  return value => printIn1Sec(value, Promise.resolve());
}());

printIn1Sec(1)
  .printIn1Sec(2)
  .printIn1Sec(3);

We just hide all the promise creation and chaining in an internal function. I split the code into smaller functions to make it a bit nicer looking.

Answer 2

You can try async and await

const printIn1Sec = (value) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(value);
        resolve();
    }, 1000)
  });
};

async function fun(){
  await printIn1Sec(1);
  await printIn1Sec(2);
  await printIn1Sec(3);
}

fun();