The ES6 promise constructor takes a function which can take up to two parameters. Callback functions resolve() or reject() to indicate the success or failure of the promise.
You can declare a standard script as a module by including type=” module” in the <script> element in the HTML document (refer to the example below).
States of Promise
- Pending: initial (first) stage
- Fulfilled: operation completed successfully
- Rejected: operation failed
Initially, a promise is in the stage of pending which means that it is waiting for something to resume its normal program flow. Now a promise is either fulfilled or rejected.
A promise is fulfilled if it’s no longer pending. Which means that it has either been resolved or rejected. A promise is fulfilled by calling the resolve() method.
A promise can not be resettled once it has been settled. Calling resolve() or reject() again will have no effect. In a nutshell, a resolved promise is immutable.
A promise is rejected if the operation fails. A promise is rejected by calling the reject() method.
How to Use Promises in ES6
To help you understand promises, let us consider a scenario where the program will wait for two seconds before sending a message to the user.
In the example above,
- The sendMessage call will wait for two seconds before sending the “Hello World” message.
- The setTimeout() method will create the delay and call the resolve() method afterward
- The function only takes the resolve() parameter only
- The resolve() parameter value is then passed through the callback function attached with .then().
The import keyword labels variables and functions in one script that are accessible in another script.
In the following, we will export a variable and a function from modules/math.js script.
The export keyword allows one script to import functionalities from another script.
In the following example, we will import modules/math.js file into the main script.
Default Export Vs Named Export
In the example above, we have used named exports. Each item (function and variable) is referred to by its name upon export. The same name is used in the other script where it’s imported.
To export a function as default, we use the keyword export default before the object name.
We can also prepend export default in front of a function and make it an anonymous function.
Notice the lack of curly braces in the examples above. It’s because there is only one default export allowed per module. In the above example, we know that the square is the default module.
Difference Between Standard Scripts and Modules
Modules are scripts but there are a few important differences between modules and scripts to keep in mind.
- Modules might behave differently as compared to the standard scripts. It’s because modules automatically execute in strict mode.
- Modules are deferred automatically.
- Modules are executed only once in a script
- Module features are imported into the scope of a single script. You cannot access module features in the global scope.