Learn promise

Time:2021-1-26

Immediate execution of promise

let p = new Promise(function(resolve, reject) {
    console.log ('create a promise ') // it is executed immediately
    resolve('success')
}

console.log('after new promise')

p.then(function(value) {
    console.log(value)
})

Implementation results:

'create a promise'
'after new promise'
'success'

Three states of promise

Unfinished state pending, completed state resolved, failed state rejected

var p1 = new Promise(function(resolve,reject){
  Resolve (1); // the synchronization code is called immediately and the status is complete
});
var p2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    Resolve (2); // asynchronous code, not executed, status incomplete
  }, 500);      
});
var p3 = new Promise(function(resolve,reject){
  setTimeout(function(){
    Reject (3); // asynchronous code, not executed, status incomplete
  }, 500);      
});

console.log(p1);
console.log(p2);
console.log(p3);
setTimeout(function(){
  console.log (P2); // 2, delay execution. At this time, P2 and P3 have been called by then(), and the state changes
}, 1000);
setTimeout(function(){
  console.log(p3); // 3
}, 1000); 

p1.then(function(value){
  console.log(value);
}); // 1
p2.then(function(value){
  console.log(value);
}); // 2
p3.catch(function(err){
  console.log(err);
}); // 3

Implementation results:

Promise { 1 } 
Promise { <pending> }
Promise { <pending> }
1
2
3
Promise { 2 }
Promise { <rejected> 3 }

Irreversibility of state

let p =new Promise(function(resolve, reject) {
    resolve('success')
    resolve('success2')
    reject('reject')
})

p1.then(function(value) {
    console.log(value)
})

Implementation results:

'success'

Once the state of project changes to resolved or rejected, the state is fixed. Subsequent calls to resolve or reject methods will not change the existing state and value

call chaining

let p = new Promise(function(resolve, reject) {
    resolve(1)
})

p.then(function(value) {
    console.log(value) // 1
    return value * 2
}).then(function(value) {
    console.log(value) // 2
}).then(function(value) {
    console.log(value) // undefined
    return  Promise.resolve ('resolve ') // returns the resolved state promise
}).then(function(value) {
    console.log(value) // 'resolve'
    return  Promise.reject ('reject ') // returns the project with rejected status
}).then(function(value) {
    console.log ('resolve '+ value) // receive value in success status
}, function(err) {
    console.log ('reject '+ ERR) // receive value reject reject in failed state
})

Implementation results:

1
2
undefined
"resolve"
"reject: reject"

The then method returns a new promise object. The return value of the function is the promise object returned by then

Exception in promise

var p1 = new Promise( function(resolve,reject){
  foo.bar();
  resolve( 1 );      
});

p1.then(
  function(value){
    console.log('p1 then value: ' + value);
  },
  function(err){
    console.log ('p1 then err: '+ ERR); // exception capture
  }
).then(
  function(value){
    console.log ('p1 then then value: '+ value); // later called by the correct function
  },
  function(err){
    console.log('p1 then then err: ' + err);
  }
);

var p2 = new Promise(function(resolve,reject){
  resolve( 2 );    
});

p2.then(
  function(value){
    console.log ('p2 then value: '+ value); // execute
    foo.bar();
  }, 
  function(err){
    console.log('p2 then err: ' + err);
  }
).then(
  function(value){
    console.log('p2 then then value: ' + value);
  },
  function(err){
    console.log ('p2 then err: '+ ERR); // exception capture
    Return 1; // returns 1
  }
).then(
  function(value){
    console.log ('p2 then then value: '+ value); // later called by the correct function
  },
  function(err){
    console.log('p2 then then then err: ' + err);
  }
)

Implementation results:

p1 then err: ReferenceError: foo is not defined
p2 then value: 2
p1 then then value: undefined
p2 then then err: ReferenceError: foo is not defined
p2 then then then value: 1

Once the exception is handled, the subsequent promise object returned by then will return to normal,And will be processed by the successful callback function of promise. In addition, it should be noted that the callback functions of P1 and P2 are executed alternately, which is determined by the asynchrony of promise then callback.

resolve

var p1 = Promise.resolve( 1 );
var p2 = Promise.resolve( p1 );
var p3 = new Promise(function(resolve, reject){
  resolve(1);
});
var p4 = new Promise(function(resolve, reject){
  resolve(p1);
});

console.log(p1 === p2); 
console.log(p1 === p3);
console.log(p1 === p4);
console.log(p3 === p4);

p4.then(function(value){
  console.log('p4=' + value);
});

p2.then(function(value){
  console.log('p2=' + value);
})

p1.then(function(value){
  console.log('p1=' + value);
})

Console output:

true
false
false
false
p2=1
p1=1
p4=1

Promise.resolve (…) can receive a value or a promise object as a parameter. When the parameter is a normal value, it returns a resolve state promise object, and the value of the object is the parameter; when the parameter is a promise object, it directly returns the promise parameter. Therefore, P1 = = P2. However, the promise object created by new method is a new object, so the following three comparison results are all false. In addition, why is the then of P4 called first, but the result is output last on the console? Because the parameter received in P4’s resolve is a promise object P1, resolve will “unpack” P1 to obtain the status and value of P1, but this process is asynchronous

The concept of unpacking should be micro task and macro task???