Promises in 15 minutes by https://fediverse.org/amarianesantana

See also

Good evening, fellows!

Let’s simplify the use of Promises ?

Particularly, when I started with the concept of Promises when I learned how to code, I saw a lot of online materials and tutorials that explained Promises in a very confusing way, then I decided to write a simple text explaining it in a very practical way. Of course, if you need to understand ‘Promises Under the Hood’ this article is not for you.

If you need to understand Promises in a short period of time to make a solution, this is for you.

Basically, Promises were made to create better asynchronous callback functions in Javascript, to make the code better organized.

To grasp the concept think like it literally means that we are making a promise in real life.

For example:

I promise that I will make you understand Promises in 15 minutes.

script.js 

 1let p = new Promise((resolve, reject) => {
 2    let a = 1 + 1
 3    if (a == 2) {
 4        resolve('success')
 5    } else {
 6        reject('failed')
 7    }
 8})
 9
10p.then(message => {
11    console.log('This is in then:' + message)
12}).catch(message => {
13    console.log('this is in catch: ' + message)
14})

callbacks.js 

 1const angular = true
 2const vue = false
 3
 4function programming(callback, errorCallback) {
 5    if(angular) {
 6        errorCallback({
 7            name: 'angular,',
 8            message: ' eww!'
 9        })
10
11    } else if(vue) {
12        errorCallback({
13            name: 'vue, ',
14            message: 'eww!'
15        })
16    } else {
17        callback({
18            name: 'react,',
19            message: 'go to do some functional components :)'
20        })
21    }
22}
23
24programming(( message ) => {
25    console.log('yess, queen!: ', message)
26}, (error) => {
27    console.log(error.name + ' '+ error.message)
28})

promises.js 

 1const angular = false
 2const vue = false
 3
 4function singlePageApps() {
 5    return new Promise ((resolve, reject ) => {
 6
 7        if(angular) {
 8            reject({
 9                name: 'angular,',
10                message: ' eca!'
11            })
12
13        } else if(vue) {
14            reject({
15                name: 'vue, ',
16                message: 'eca!'
17            })
18        } else {
19            resolve({
20                name: 'react,',
21                message: 'go to do some functional components :)'
22            })
23        }
24    })
25}
26
27singlePageApps().then(( message ) => {
28    console.log('yess, queen!: ', message)
29}).catch ((error) => {
30    console.log(error.name + ' '+ error.message)
31})

promiseAll.js 

 1const firstRequest = new Promise((resolve, reject) => {
 2    resolve('Im the first request ')
 3})
 4
 5const secondRequest = new Promise((resolve, reject) => {
 6    resolve(' Im the second request')
 7})
 8
 9Promise.all([firstRequest, secondRequest])
10    .then(messages => {
11        console.log('Success! ' + messages)
12})