PROMISE in JAVASCRIPT

Photo by Max Chen on Unsplash

Asynchronous programming in Javascript

Anyone who has ever done AJAX knows that Javascript ; the asynchronously connects to the server functions behind do not wait for the AJAX function to finish but continue to run.

var xxxImage = ajax.get("hotgirl.info");
console.log(xxxImage);
// Pass callback to function ajax
var callback = function (image) {
console.log (image);
};
ajax.get("hotgirl.info", callback);

// Can be abbreviated as follows
ajax.get("hotgirl.info", function (image) {
console.log (image);
})
var car = buycar();
var girl = goout(car);
var abcd = goToHotel(y);

// That must use callback heap, creating callback hell
buycar(function(car) {
goout(car, function(girl) {
goToHotel(hotel, function(z) {
// Do something, who knows
});
});
});

What is a Promise?

Promises concept explained by MDN is quite ambiguous and somewhat … confusing:

Photo by Katrina Holmgren on Unsplash

A promise has the following 3 states:

  • pending
  • fulfilled
  • reject
function get (url) {
return new Promise ((resolve, reject) => {
// Get the picture from abc.com
// If there is an error, I can not promise
if (error) reject ("Error");

// If obtained, then fulfill the promise
resolve (xxxImage);
});
}

var promise = ajax.get ("hotgirl.info");
promise
.then (image => fap)
.catch ((error) => alert (error));

Why we should use PROMISE?

Promises are good at the following points:

  • Promise supports “chaining”
  • Promises make it easier to catch errors
  • Handling asynchronous

1. Promise chaining

The return value of the then function is another promise. So we can use promises to call asynchronous functions consecutively. The above function can be rewritten as follows:

// Dùng callback hell
buycar(function(car) {
goout(car, function(girl) {
goToHotel(hotel, function(z) {
// Do something, who knows
});
});
});

// Use promises, lightweight and easy to read code
buycar
.then(goout)
.then(goToHotel)
.then(function() { /*Do something, who knows*/ });

2. Promises make it easier to catch errors

In the above example, we call 3 functions in turn: buycar, goout, goToHotel.

// When a function fails, the promise is rejected.
function send_hotel () {
return Promise ((response, reject) => {
reject ("Sorry today, I am red light");
});
}


please_mother_mua_xe
.then (played_player)
.then (hotel_to_hotel)
.then (function () {/ * Do something, who knows * /})
.catch (function (err) {
console.log (err); // "Sorry today I light red"
console.log ("bad luck");
});

3. Asynchronous handling

Let’s say you want 3 different AJAX functions. You need the results returned for these 3 functions before you can continue running. With the callback, this will be quite difficult to do. However, promises support the Promise.all function, allowing the results of multiple promises together.

Conclusion

With its advantages, promises are gradually replacing callbacks. Of course not completely replaced. For simple functions, using callbacks is shorter and easier to understand than promises.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Beribey

Beribey

Always be nice to anybody who has access to my toothbrush.