CODEWITHSUNDEEP
javascript
Pop
Pop

Reputation: 145

Confusion the use of resolve() and then() methods with Promise

I was learning promises in JS and the use of resolve() and then() is a bit confusing me. So, as far as I understood, the promises serve as a wrapper for asynchronous operations and the reason to use promise is to ensure the easier chaining. Right? Then, the reason to use resolve() is that it points to the place where we get data and after that we do something with that data thanks to then(). Is that correct? if not can you explain why to use resolve() and then() in simple words.

Upvotes: 3

Views: 6657

Answers (5)

Rocky Sims
Rocky Sims

Reputation: 3598

A promise is a placeholder for data that will be available later.

const promise = new Promise(function(resolve) {
  console.log('waiting for async...');
  //wait for some asynchronous thing to provide data
  setTimeout(function() {resolve('theData');}, 2000);
});

promise.then(function(data) {
  console.log('promise was resolved with data: ' + data);
});

console.log('listening for promise resolution');

The above snippet will log:

"waiting for async..."

and immediately after

"listening for promise resolution"

then wait for async to finish then

"promise was resolved with data: theData"

Upvotes: 1

yqlim
yqlim

Reputation: 7080

Promise, resolve, and reject

new Promise(), Promise.resolve(), and Promise.reject() all creates a promise instance.

Then and catch

.then() and .catch() are used to react to the asynchronous value returned by the promise instance.

What are the difference then?

new Promise() is to execute asynchronous operations. It must resolve or reject with a value.

Promise.resolve() and Promise.reject() is to wrap a value into a resolved or rejected promise value.

.then() is to react with a resolved promise with its value.

.catch() is to react with a rejected promise with its value.

Conclusion

All promises must be initiated with one of new Promise(), Promise.resolve(), or Promise.reject(). Only then you are able to use .then() or .catch().

Just think of it like normal English, you only use the word "then" after something is done (making a promise, for example).

Upvotes: 3

virchau13
virchau13

Reputation: 1448

The then method is used for running code after the previous promise resolves.

The resolve method is used to do two things: 1) end a Promise; and 2) if data is passed into it, it passes that data into a then callback.

This makes it easy to write code that runs after other code. For example:

let p = new Promise((resolve, reject) => {
  let arr = [];
  for(let i = 0; i < 10; i++)arr.push_back(i);
  resolve(arr);
});
p.then(arr => console.log(arr));

The callback in p.then will run only after the previous Promise resolves, i.e. calls resolve().
You don't have to pass data into resolve if you don't want to - just do resolve(null) or the like.

Upvotes: 1

mwilson
mwilson

Reputation: 12900

resolve and reject are just ways to tell the caller that your promise is completed (it's been resolved or rejected). .then can be used, but I prefer to use await when I can.

Using return new Promise( (resolve, reject) => {}); is a good way to wrap things to make then asynchrous which is awesome, but most of the time, if something returns a promise (like a lot of libraries are starting to do), then you can just await it. Same thing as calling .then on a promise (from a 10,000 foot level)

Example:

const myPromise = async () => {
	return new Promise( (resolve, reject) => {
  	setTimeout( () => {
    	resolve('im done!');
    }, 1000);
  })
}

// Use .then to call your promise in a 'callback way'
myPromise().then( text => console.log(text));

async function awaitThePromise() {
// using await to call your promise
	const result = await myPromise();
  console.log(result);
}

awaitThePromise();

Upvotes: 2

Johnny Zabala
Johnny Zabala

Reputation: 2465

If it helps you, I see promises as future values. I like to use the analogy of a ticket. For example when you buy food you get a ticket. You already pay for the food (you initiated the action to get your food), but the food is not ready yet so, you get a place holder (ticket), something that you can exchange later for the food. Now, resolve is how internally they notify that the food is ready. And then is where you subscribe to be notified.

So, they resolve(food) and you get notified then(food). By you get notified I mean your callback is called with the food.

Upvotes: 1

Related Questions