ES6 resolve callback hell of Promise

Callback:

        In which a function to invoke the function parameter passed in a.

E.g:

function a(callback){
	callback();
}

a(function(){

})

Callback Hell:

        The callback function to apply too much. Ajax and internal jsonp front of the huge number of asynchronous, in order to be able to get asynchronous data, use a lot of callbacks, to get the data after asynchronous execution success in the future.
        To some extent, the callback hell can solve the problem, but there are shortcomings, or say elegant, reading is very poor.

E.g:

var sayhello = function (order, callback) {
	setTimeout(function () {
    console.log(order);
    callback();
  }, 1000);
}
sayhello("first", function () {
  sayhello("second", function () {
    sayhello("third", function () {
      console.log("end");
    });
  });
});
//输出: first second third  end

Promise Description:

  1. Promise is one hell of a callback solution, we use grammar Promise to solve the problem of callback hell, the readability and maintainability of the code has (ES6 provisions, Promise object is a constructor, to generate Promise instance, for All asynchronous).

  2. Promise has three states:
            the Pending: asynchronous thing is being performed;
            Fulfilled: asynchronous thing a success;
            Rejected: asynchronous thing failed.

  3. Promise basic syntax:

let p = new Promise(function(resolve,reject){
	// 此处做一个异步的事情
})
p.then(function(){})
p.catch(function(){})
  1. resolve函数The role of asynchronous operation upon successful call, and the result of the asynchronous operation, to pass out as a parameter;
  2. reject函数The role is an asynchronous operation failed calls, and asynchronous operations reported an error, passed away as a parameter
  3. After generating Promise example, you can then方法specify a callback function of the resolved state and a rejected state.
  4. things after reject, will then enter the second callback, if not then write a second callback, then enter catch方法.
  5. The method then can accept two callback functions as arguments. The first callback function is called when the state Promise object becomes resolved, the second callback function is called when the state becomes the object Promise rejected. Wherein the second function is optional and not required to provide. Both functions accept the value of the object Promise came as a parameter.
  1. Promise of chained calls:
let p = new Promise(function(resolve,reject){
	// 此处做一个异步的事情
}).then(function(){
	return new Promise(function(){
	// 此处做第二个异步的事情
}).then(function(){

})
  1. Promise batch -all:
    all the success, that is success; as long as there is a failure, that is failure.
let p1 =  new Promise(function(resolve,reject){});
let p2 =  new Promise(function(resolve,reject){});
let p3 =  new Promise(function(resolve,reject){});

Promise.all([p1,p2,p3]).then(function(){
}).catch(function(){
})
  1. Promise batch -race:
    get the first end of the state, regardless of success or failure.
let p1 =  new Promise(function(resolve,reject){});
let p2 =  new Promise(function(resolve,reject){});
let p3 =  new Promise(function(resolve,reject){});

Promise.race([p1,p2,p3]).then(function(){
}).catch(function(){
})

Promise to solve the callback hell:

var sayhello = function (order) {
  return new Promise(function (resolve, reject) {
      setTimeout(function () {
      console.log(order);
      //在异步操作执行完后执行 resolve() 函数
      resolve();  
    }, 1000);
  });
}
sayhello("first").then(function () {
  //仍然返回一个 Promise 对象
  return sayhello("second");  
}).then(function () {
  return sayhello("third");
}).then(function () {
  console.log('end');
}).catch(function (err) {
  console.log(err);
})
//输出:first  second  third end
Published 67 original articles · won praise 260 · views 50000 +

Guess you like

Origin blog.csdn.net/weixin_42881768/article/details/104839009