DEV Community

loading...
Cover image for JavaScript: Concept of  Promise

JavaScript: Concept of Promise

Swarnali Roy
I am a Junior Software Engineer. Learning new things and sharing those with fellow developers.
ใƒปUpdated on ใƒป2 min read

Dear readers, this post is about a very useful and important concept of JavaScript. I think every beginner should have this basic knowledge while developing any project.

What is a Promise

In JavaScript, Promise is a very important concept.The Promise object represents the eventual completion or failure of an asynchronous operation and its resulting value.

๐Ÿ‘‰๐Ÿป A Promise is a proxy with an unknown value whenever a Promise is generated.
๐Ÿ‘‰๐Ÿป This allows the controller to connect with the final success value or reason for failure of the asynchronous operation.
๐Ÿ‘‰๐Ÿป This allows asynchronous methods to return the same values โ€‹โ€‹as synchronous methods.
๐Ÿ‘‰๐ŸปInstead of returning the final value immediately, the asynchronous method returns a promise to provide the value at a particular point in the future.

Basic Syntax

Promise is a constructor function, so we need a new to create a Promise. It takes a function, as it's argument, with two parameters: resolve and reject.
The syntax generally looks like:

const myPromise = new Promise((resolve, reject) => { } ) ;

States of a Promise

A promise has three states:

i) pending: It's the initial state, neither successful nor unsuccessful.

ii) fulfilled: It means that the operation was completed successfully.

iii) rejected: It indicates that the operation has failed.

Resolve Parameter

The resolve parameter is used when we want the promise to succeed.

Reject Parameter

The reject is used when we want to catch the failure.

The following is an example of a Promise:

const makeServerRequest = new Promise((resolve, reject) => {
  let responseFromServer;

  if (responseFromServer) {
    resolve("We got the Data");
  } else {
    reject("Data not Found");
  }
});
Enter fullscreen mode Exit fullscreen mode

In the code snippet, responseFromServer represents a response from the server.

If responseFromServer is true, the resolve method will be called to successfully complete the promise and return the string as it's argument.

(Generally, it returns data)

Again, if responseFromServer is false, the promise will fail and call the reject method.

(Generally it catches the errors).

Discussion (12)

Collapse
sankalpswami1122 profile image
Sankalp Swami • Edited

Great! you can use

\`\`\`js
console.log("your code here")
\`\`\`
Enter fullscreen mode Exit fullscreen mode
Collapse
swarnaliroy94 profile image
Swarnali Roy Author

Hey, as I am new to the platform, didn't know about this and couldn't understand your comment. Thank you so much. It works fine.

Collapse
sankalpswami1122 profile image
Sankalp Swami

when you put 3 back ticks and then "js" in front of it, it it javascript specific code snippet. thats it

Thread Thread
swarnaliroy94 profile image
Swarnali Roy Author

Yes I got it now โ˜บ๏ธโ˜บ๏ธ

Collapse
davids89 profile image
David

One thing you must know it's that an async function always returns a promise.

Collapse
swarnaliroy94 profile image
Swarnali Roy Author

Yes.. My next post will be about that.

Collapse
kanogithub profile image
kanogithub

Is there a way to get states? Such as pending...?

Collapse
swarnaliroy94 profile image
Swarnali Roy Author • Edited

Pending state starts while generating the promise, until it is either resolved or rejected. That means, until you get any result, successful or failure, the state is pending.
Well, if you working with React or React Native, in that case you can set the initial state as pending state, set resolve in then section and set reject in catch section. I'll write about it later in another post clearly.

Collapse
moriseif1 profile image
moriseif1

You can use defualt state with pending string and then after resolve you can change state with resolve and in catch section set state with reject !
If you mean state in React ๐Ÿ˜‚

Collapse
swarnaliroy94 profile image
Swarnali Roy Author

Correct

Collapse
imtridevsharma profile image
im-tridevsharma

Perfect ๐Ÿ‘Œ

Collapse
swarnaliroy94 profile image
Swarnali Roy Author

Thank you so much