es6（一）——promise对象

最近处理node逻辑，出现一种状况：需要同时进行异步操作，并且后一操作需要前一操作返回值来执行，而express模块呢，只能支持es5，那只能一层加一层嵌套进去，这对于编程了一年多的我来讲，有些恶心了（程序员都有个通病，那就是矫情~）。索性，promise对象就算为了应付这一状况的。

含义：promise对象就是用来处理异步操作的，处理成功了就执行成功操作，处理失败了就捕捉异常或停止继续操作。

promise的三种状态：pending（未处理），fulfilled（处理成功），rejected（处理失败）。

原型方法：promise.prototype.then()和promise.prototype.catch()

var promise = new Promise(
    (resolve, reject) => {
        reject("this is promise reject catch");
    }
).then(
    (msg) => {
        console.log(msg);   //这里不会触发
    }
).catch(
    (err) => {
        console.log(err); // thi is promise reject catch
    }
);

通过上面的例子，then()就是用来处理成功的函数，而catch便是用来捕捉失败的v函数。

函数方法

promise.all()，promise.race()，promise.resolve()，promise.rejected()

promise.all()方法，是一种迭代，用来处理并发异步操作的，它只有在参数内都为fulfilled状态下，才能返回fulfilled状态。

var arr = [1, 2, 3];
var promises2 = arr.map(function(e) {
  return new Promise(function(resolve, reject) {
    if (e === 3) {
      reject('rejected');
    }
    resolve(e * 5);
  });
});

Promise.all(promises2).then(function(data) {
  // 这里不会执行
  console.log(data);
  console.log(arr);
}).catch(function(err) {
  console.log(err); // rejected
});

promise.race()与all方法类似，但它只需要参数中一个有fulfilled状态便能返回fulfilled状态。

var p1 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 300, 'p1 doned');
});

var p2 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 50, 'p2 doned');
});

var p3 = new Promise(function(resolve, reject) {
  setTimeout(reject, 100, 'p3 rejected');
});

Promise.race([p1, p2, p3]).then(function(data) {
  // 显然p2更快，所以状态变成了fulfilled
  // 如果p3更快，那么状态就会变成rejected
  console.log(data); // p2 doned
}).catch(function(err) {
  console.log(err); // 不执行
});

promise.resolve()返回一个成功的方法，可接收then方法的对象，普通值以及promise的实例。

// 参数为普通值
var p4 = Promise.resolve(5);
p4.then(function(data) {
  console.log(data); // 5
});


// 参数为含有then()方法的对象
var obj = {
  then: function() {
    console.log('obj 里面的then()方法');
  }
};

var p5 = Promise.resolve(obj);
p5.then(function(data) {
  // 这里的值时obj方法里面返回的值
  console.log(data); // obj 里面的then()方法
});


// 参数为Promise实例
var p6 = Promise.resolve(7);
var p7 = Promise.resolve(p6);

p7.then(function(data) {
  // 这里的值时Promise实例返回的值
  console.log(data); // 7
});

promise.rejected()与 promise.resolve()相反，接受一个参数值。

var p10 = Promise.reject('手动拒绝');
p10.then(function(data) {
  console.log(data); // 这里不会执行，因为是rejected态
}).catch(function(err) {
  console.log(err); // 手动拒绝
}).then(function(data) {
 // 不受上一级影响
  console.log('状态：fulfilled'); // 状态：fulfilled
});

实践

那如何来实现异步函数b依赖异步函数a的结果呢？

function a(){
      return new Promise(function(res,rej){
        $.ajax({
          url:"a",
          type: "GET",
          async:true,
          dataType:"json",
          success:function(data){
            console.log(data,"a");
            res(data);
          }
        })
      });
    }
    function b(data){
      console.log(data,"data");
      return new Promise(function(res,rej){
        $.ajax({
            url:"b",
            type: "POST",
            async:true,
            data:JSON.stringify(data),
            dataType:"json",
            success:function(data){
              console.log(data,"b");
              res();
            }
          })
      });
    }
    $("#btn").click(function(){
      a().then(function (data){
        b(data);
      }).then(function(){
      })
    })

es6（一）——promise对象

猜你喜欢