JavaScript Promise wrapped in function or bare?

Question

If I'm calling a function that is a promise, do I need to do this "wrap it in another function" layer?

Promise
.resolve()
.then(()=>{ // this part seems excessive
  return new Promise(resolve={
  // my function's guts

Can I return the new promise directly, like

Promise
.resolve()
.then(new Promise(resolve={
  // my function's guts

no. .then needs a function. Otherwise, you mightaswell have used .all because they're running in parallel. — Kevin B, Feb 07 '17 at 23:29
The function is necessary, because it's not called right away. It's asynchronous. If the function wrapper wasn't there, it would be executed immediately. You can't eat a pizza that hasn't been delivered yet. — 4castle, Feb 07 '17 at 23:31
any non function value for .then's onFullfilled or onRejected arguments are ignored — Jaromanda X, Feb 07 '17 at 23:34
relevant: http://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it — Mulan, Feb 08 '17 at 00:33

score 1 · Answer 1 · answered Feb 07 '17 at 23:38

1

You do have to wrap the promise in another function.

However, you can shorten it a bit because:

() => {
    return new Promise()
}

is the same as

() => new Promise()

So you could do something like this:

Promise
.resolve()
.then(() => new Promise(resolve => {
  // your function's guts

answered Feb 07 '17 at 23:38

cansyrup756

70
1
8

1

Why the `Promise.resolve()` part at all? There does not seem to be any point to that. – jfriend00 Feb 08 '17 at 00:30
Well, it's pointless so I'm not sure why you have it in your answer. You don't need `Promise.resolve()` in order to use `new Promise()` – jfriend00 Feb 08 '17 at 00:33

score 1 · Answer 2 · answered Feb 08 '17 at 00:36

There is no need to use Promise.resolve() when creating a new promise.

The usual way to create a promise is to make a function that returns the promise:

function myFunc() {
   return new Promise((resolve, reject) => {
       // your async logic here
   });
}

Then, you call it like this:

myFunc().then(result => {
    // code that uses async result here
});

And, you have put your promise creation logic into a reusable function.

It is possible (though usually less practical) to create a new promise without putting it in a containing function. For example, you can do this:

new Promise((resolve, reject) => {
    // async logic here that eventually calls resolve or reject
}).then(result => {
    // process async result here
}).catch(err => {
    // process error here
});

Brian · Accepted Answer · 2017-02-08T02:34:27.360

If I'm calling a function that is a promise, do I need to do this "wrap it in another function" layer?

Yes otherwise it'll be executed immediately I recommend you create your promises within a named function that way it allows you to keep your chain neat and readable and code more reusable.

myTask1()
  .then(myTask2)
  .then(myTask3);

function myTask1() {
  return new Promise((resolve, reject) => {
    console.log("Task 1");
    resolve("Task 1");
  })
}

function myTask2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Task 2");
      resolve("Task 2");
    }, 1000)

  })
}

function myTask3() {
  return new Promise((resolve, reject) => {
    console.log("Task 3");
    resolve("Task 3");
  })
}

Can I return the new promise directly, like.... .then(new Promise(resolve={?

No there's one critical difference with instantiating the promise like that. When you wrap the promise in a function it isn't evaluated until the previous promise completes whereas if you instantiate it inline then it's evaluated immediately which may cause unexpected results:

new Promise((resolve, reject) => {
    resolve()
  })
  .then(new Promise((resolve, reject) => {
    console.log("Task 1");
  }))
  .then(new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Task 2");
      resolve("Task 2");
    }, 1000);
  }))
  .then(new Promise((resolve, reject) => {
    console.log("Task 3");
    resolve("Task 3");
  }))

To make the above work you could change it so that the closure returns a promise, but it starts to look pretty messy:

new Promise((resolve, reject) => {
    resolve()
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      console.log("Task 1");
      resolve("Task 1");
    })
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("Task 2");
        resolve("Task 2");
      }, 1000);
    });

  })
  .then(() => {
    return new Promise((resolve, reject) => {
      console.log("Task 3");
      resolve("Task 3");
    });
  })

score 0 · Answer 4 · answered Feb 08 '17 at 01:35

0

The handler for then could simply return a value.

Promise.resolve('value').then(() => 'otherValue');

answered Feb 08 '17 at 01:35

Chen Pang

1,370
10
11

JavaScript Promise wrapped in function or bare?

4 Answers4