jQuery then 的总结

@渡一教育 2019 4 21

$.ajax() 引发对 then的总结

$.ajax({
            url: 'https:/www.baidu.com/58?wd=nba',
            type:'GET',
            success: function () { },
            error: function () {}
        })

then 方法 只有Deferred对象才有，下面这段通过$.ajax来注册then() 回调是怎么回事呢？ $.ajax({}) 的返回值是XMLHttpRequest对象。

$.ajax({
    url:'https:/www.baidu.com',
    type: "GET",
}).then(function () {
    console.log('请求成功的回调函数')
}, function () {
    console.log('请求失败的回调函数')
})
由此我们猜想返回的 ajax 对象是一个Deferred对象， 事实也是如此的

说先我们来回顾一下 Deferred 基本知识：
var df = $.Deferred() // 创建并返回一个Deferred延迟对象
df.done() // 延迟成功调用 done回调函数
df.fail() // 延迟失败 时调用 fail 回调函数
df.progress //延迟正在进行时 调用progress回调函数

df.resolve(value) // 当df.resolve(valuve) 执行回调 df.done(function (vallue) {}) （value当作回调函数的形参 ）
df.reject(value) // 当df.reject(valuve) 执行回调 df.fail(function (vallue) {}) （value当作回调函数的形参 ）
df.notify(value) // 当df.notify(valuve) 执行回调 df.progress(function (vallue) {}) （value当作回调函数的形参 ）

df.done () // 满足条件 执行df.resolve(value) 告诉 df.done()执行回调
df.fail() // 满足条件 执行df.reject(value) 告诉 df.fail()执行回调
df.progress() // 满足条件 执行df.notify(value) 告诉 df.progress()执行回调

resolve和reject方法一旦执行,表示开始执行done,fail,then,always方法,
注意Deferred对象可以一次挂接多个done,fail方法,按照你分布的顺序依次执行

调用done回调

    var df = $.Deferred();
        df.done(function (value) {
            alert("done:" + value);
        })
        df.resolve('成功的回调')

调用then
then(function () { 成功的回调函数} ,function () { 失败的回调 } , function () { 正在执行的回调})

var df = $.Deferred()
function doneFun(value) {
console.log("成功的回调" + value)     //成功的回调
}
function failFun(value) {
console.log("失败的回调" + value)
}
df.then(doneFun, failFun)
df.resolve('Oh yeah')

state() 返回Deferred对象目前的状态
1.pending:操作没有完成
2.resolved:操作成功
3.rejected:操作失败

var df = $.Deferred()
df.fail(dunction (value) {console.log(value)})
console.log(df.state())       //pending
df.reject("真好")      //真好
console.log(df.state())   // rejected

progress(fn)和notify(value)

progress和done之类的方法不同.
progress(fn)的fn表示一个回调函数,这个回调函数由notify()方法通知执行

  // 做一件异步的事情
        function createScore () {
            var df = $.Deferred();
            setInterval(function () {
                var score = Math.random() * 100;
                if (score > 60) {
                    df.resolve('congradulation!!!');
                }else if (score < 50) {
                    df.reject('get out');
                }else {
                    df.notify('go on');      // 这儿  df.notify() 告知df.progress(function () {}) 执行
                }
            }, 1500);
            // done fail progress
            return df.promise();    // 返回的df对象只能在外界注册回调  不能通过df.resolve() 来执行通知对应的回调 执行
        }

        var df = createScore();
   
        // 注册成功的回调函数
        df.done(function (ms) {
            console.log('oh yeah I do it' + ' ' + ms);
        });
        // 注册失败的回调函数
        df.fail(function (ms) {
            console.log('sorry I am loser' + ' ' + ms);
        });
        // 注册进行时的函数
        df.progress(function (ms) {
            console.log('waiting...' + ' ' + ms);
        });        

jQuey除了.ajax()有done方法外,还有哪些东西有done方法…when(df); df是一个或多个延迟对象，或者普通的JavaScript对象

$.when({name:"何晓帅",sex:"男"})
.done(function(data){
    console.log(data.name)    //何晓帅

我们是否可以用 setTimeout 来模拟延迟对象呢

function delay(){
    setTimeout(function(){
        alert("执行啦");
    },2000);
}        
$.when(delay())
.done(function(){
    alert("done");
});
显然这里是不对的  $.when() 的参数时 delay() 函数执行  并非是Deferred 延迟对象类型
而ajax 返回的是一个延迟对象
.ajax()返回Deferred类型才能使用done一样.那么要怎么样才能让delay返回一个Deferred对象来完成我们的延迟模拟呢.

function delay(){
var df = $.Deferrd()
    setTimeout(function(){
      df.resolve("开始执行啦")
    },2000);
    return df
}        
$.when(delay())   // $.when 的参数是一个df类型的对象
.done(function(value){
    alert(value);
});

上面这样有点不好 return df 我们可以在外界被 随意的 通过df.resolve() 来通知回调函数执行

function delay(){
var df = $.Deferrd()
    setTimeout(function(){
      df.resolve("开始执行啦")
    },2000);
    return df.promise()    返回的df对象只能在外界注册回调  不能通过df.resolve() 来执行通知对应的回调 执行
}        
$.when(delay())   // $.when 的参数是一个df类型的对象
.done(function(value){
    alert(value);
});

！！！这样返回的df 在外界就只能注册回调了

总结：ajax返回的是 XMLHtttpResquest 对象 但在jquery中返回时被包装成了 Deferred对象 返回出来，以上就是为什么 $.ajax 可以调用 then()、done()、fail()等方法的解释