CODEWITHSUNDEEP
javascriptpromisees6-promise
Benjamin H
Benjamin H

Reputation: 5464

JavaScript Promise wrapped in function or bare?

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

Upvotes: 2

Views: 1009

Answers (4)

Brian
Brian

Reputation: 2952

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");
    });
  })

Upvotes: 1

Chen Pang
Chen Pang

Reputation: 1388

The handler for then could simply return a value. 

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

Upvotes: 0

jfriend00
jfriend00

Reputation: 707158

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
});

Upvotes: 1

cansyrup756
cansyrup756

Reputation: 70

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

Upvotes: 1

Related Questions