A text read JS Asynchronous Programming (Promise)

Foreword

JS Asynchronous programming is divided into four kinds of callbacks and generators which is not the focus of this article, we focused on the Promise and async, await it.

Promise

First, we look at several features of Promise:

1. Delay callback method then bind i.e., it can accept two callback functions as arguments. The first callback function is called when the state Promise object becomes resolved, the second parameter is optional, generally use the catch trigger, whether that way is to delay the implementation of the callback function.
2. The return value penetration.

readFilePromise('1.json').then(data => {
    return readFilePromise('2.json');
}).then(data => {
    return readFilePromise('3.json');
}).then(data => {
    return readFilePromise('4.json');
});

The method can be seen then returned Promise can continue to use later.

3. Error bubble, every error occurring throughout thenable chained calls can be captured by the last catch.

then method

then there is no doubt that these methods of the most important, I learned the following codes when chained calls answered a lot of my doubts.

Note then receives two parameters, is a function, a second alternative.

While the function returns a value that can also be a Promise, if the former, he will call a Promise package delivery back to use; if the latter will also call for later use.

var p = new Promise(function(resolve, reject){
  resolve(1);
});
p.then(function(value){               //第一个then
  console.log(value);
  return value*2;
}).then(function(value){              //第二个then
  console.log(value);
}).then(function(value){              //第三个then
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){              //第四个then
  console.log(value);
  return Promise.reject('reject');
}).then(function(value){              //第五个then
  console.log('resolve: '+ value);
}, function(err){
  console.log('reject: ' + err);
})

Next look at a determined order of execution:

var p1 = new Promise( function(resolve,reject){
  console.log('start1')
  resolve( 1 );	  
});

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

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

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

The final results of the implementation as follows:

VM382:2 start1
VM382:33 start2
VM382:8 p1 then value: 1
VM382:22 p2 then value: 2
VM382:12 p1 then then value: undefined
VM382:26 p2 then then value: undefined
VM382:30 p2 then then then value: undefined

resolve and reject

Resolve regard, it can accept an ordinary value, you may also receive a Promise

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))

A program such as this, the state 3000ms before p1 is pendding, since this is dependent on p1 p2 the resolve of the state, so the state p2 we can ignore.

Then p2 then go method, result that is a Promise, state pendding.

3000ms go after catch, because the state change p1, p2 and directly forwarded reject p1 of.

all and race

One is completed to be successful, who run fast who is a success.

Of course, all about the race and there are some details, such as the transfer of value is not the promise, then will carry out a Promise processing; error if the statement Promise, the method is not going to go catch all the more.