异步Promise历史jQuery-deferred

异步 Promise 之 jQuery-deferred

这之前我们都在用ES6的Promise,但是我们知道Promise的历史么,和他的前世今生。一样技术（标准）的出生往往是是能解决我们身边一些问题在慢慢的孕育而生的。

jQuery-deferred

ES2015才加入Promise,但是在jQuery 1.5版本的时候就有了.then的写法了，慢慢的成为了JS的标准

jQuery 1.5版本前 使用了callback这种形式

var ajax = $.ajax({
  url: 'data.json',
  success: function () {
    console.log("success1"),
    console.log("success2"),
  },
  error: function () {
    console.log("error")
  }
})

console.log(ajax) //返回一个XMR对象

这样写有个很大的缺点 回调套回调套回调

---

jQuery 1.5版本后 拆分到很多的函数中，会按顺序执行，代码可读性提高

var ajax = $.ajax('data.json')
ajax.done(function(){
  console.log('success1')
}).fail(function(){
  console.log('error')
}).done(function(){
  console.log('success2')
})
console.log(ajax) //返回一个deferred对象

使用jQuery Deferred

第一类 .resolve reject 是主动执行的函数
第二类 .then 是监听方法

function waitHandle() {
  var dtd = $.Deferred() //deferred对象

  //加工一下
  var wait = function(dtd) {
    var task = function() {
      console.log('执行完成')
      dtd.resolve()//执行成功
      // dtd.reject()//执行失败
    }
    setTimeout(task,1000)
    return dtd
  }
  return wait(dtd)
}

var w = waitHandle()
w.reject();//如果这里主动执行reject 就会都是error了 这说明封装的不是很好
w.then(function(){
  console.log('ok 1')
},function(){
  console.log('error 1')
}).then(function(){
  console.log('ok 2')
},function(){
  console.log('error 2')
})

// ok1 ok2

但是上面有个问题w.reject()之后都会返回error了

这里我们需要修改一下

return dtd
//修改为
return dtd.promise()

这里返回的就是一个promise对象，只暴露出了监听的方法then……，
而resolve,reject() 无法调用 就会报错。

这样封装的好处

1. 完美的阐述了：开放封闭原则。对扩展开放，则修改关闭，

2. promises的使用使得事情变扁平而且更可读了

promise 和Deferred的区别

Promise对象可以隔离resolve和reject，让用户只能监听不能

延伸阅读：Aaron老师关于异步Promise