jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....

　　 $.ajax()

　　$.Callbacks()

　　$.Deferred()

　　.then()

　　$.when()

-----------------------------------------------------------------

　　$.ajax()

向后端请求数据。

　　参数：obj  对象

对象里面放啥， 放下面这些   ↓    以下为常用的 属性。

　　url : 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person'       (渡一教育提供)

　　type : 请求方式， 一般最常用的 有 GET 和 POST

　　data : { }  一般，接口的 文档， 会告诉你，你需要什么数据，就传什么参数

　　success : 请求成功后的处理函数

　　error : 请求失败后的处理函数

　　complete : 请求完成后的处理函数 最后执行。  无论 请求是否成功， 到最后都会执行

　　context : 改变函数执行上下文。   ajax 里面的函数， this  为 ajax 对象。但是把，我们一般操作的时候，并不希望是他， 所以可以传 外面的 值来改变

　　timeout :  这个值一般不会用到。设置请求超时时间（毫秒）  设置一个值， 如果 请求的时间超过 这个时间，那么就不请求了。

　　async : true  false  是否异步，  默认是 true， 本身 ajax 就是异步的，因为js 是单线程， 不可能一直在等你 请求完后 再执行其他js 操作吧

　　dataType :  预期服务器返回的数据类型。  你期待服务器给你返回的是 什么类型的数据。  一般不会用到他的，他会智能识别。

无论请求成功或者失败， 函数都要接受一个参数，成功，接受的是数据，失败接受的是 错误信息

下面看看 请求成功 ： 

请求失败 :

　　$.Callbacks()

管理回调函数 

var callbacks = $.Callbacks() 

方法：.add()  把 回调函数， 添加到 callbacks 里面去  .fire()  执行 callbacks 里面的全部函数  

var callbacks = $.Callbacks(参数)

可填参数：

once   让回调函数，只执行一次

memory  无论你在哪里执行了回调函数，  你后面添加的新 的回调函数， 都会执行。

unique  去重，  去掉重复的 回调函数

stopOnFalse  当在执行回调函数，回调函数里面有 return false 的时候，会停止。不会执行下个回调函数

 

once

memory

unique

stopOnFalse

 callbacks() 原理： 这里只实现了 once  和 memory 参数的处理

 1 jQuery.MyCallbacks = function () { //once memory
 2         var ags = arguments[0] || ''; //拿 传进来的 参数 ↑
 3         var list = []; // 装 add进来的 函数，
 4         var fireIndex = 0;
 5         var fireAgs = [];
 6         var lock = false; //控制 memory 参数
 7
 8         function fire() { //执行 add进去的 函数
 9             lock = true;
10             for (; fireIndex < list.length; fireIndex++) {
11                 list[fireIndex].apply(window, fireAgs);
12             }
13             if (ags.indexOf('once') != -1) { //判断， 如果有 once 参数，就 清空 list数组
14                 list = [];
15                 fireIndex = 0;
16             }
17
18         }
19
20         return { // 返回 add 函数， 和 fire 函数，供通过callbacks调用
21             add: function (func) {
22                 list.push(func);
23                 if (lock && ags.indexOf('memory') != -1) {
24                     fire();
25                 }
26                 return this;
27             },
28             fire: function () {
29                 fireIndex = 0; //再次调用的时候， 把索引归0 让他再循环一遍，就可以达到 再次执行
30                 fireAgs = arguments;
31                 fire(); //执行
32             }
33         }
34     }

　　$.Deferred()

方法如下：

　　.done()    注册 成功时执行的回调函数　　

　　.fail()　　注册 失败时执行的回调函数

　　.progress()　　注册 正在进行时 执行的回调函数

　　.resolve()　　要执行成功的回调函数 得使用该方法  .resolve()

　　.reject()　　 要执行失败的回调函数 得使用该方法  .reject()

　　.notify()　　要执行 正在进行时的回调函数， 得使用该方法 .notify()

　　.promise()　　如果在函数里面 创建 deferred变量， 在函数里面 return deferred.promise() 方法， 那么外部只能拿到 注册方法， 使用不了 执行方法。

 原理如下：

 1 jQuery.MyDeferred = function(){
 2         var deferred = {};
 3         var lock = true;
 4
 5         var arr = [
 6             [jQuery.MyCallbacks('once memory'), 'done', 'resolve'],
 7             [jQuery.MyCallbacks('once memory'), 'fail', 'reject'],
 8             [jQuery.MyCallbacks('memory'), 'progress', 'notify']
 9         ];
10
11         for(var i = 0; i < arr.length; i ++){
12             deferred[arr[i][1]] = (function(index){
13                 return function(func){
14                     arr[index][0].add(func);
15                 }
16             })(i);
17             deferred[arr[i][2]] = (function(index){
18                 return function(){
19                     var ags = arguments;
20                     if(lock){
21                         arr[index][0].fire.apply(window, ags);
22                         arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? lock = false : '';
23                     }
24                 }
25             })(i)
26         }
27         return deferred;
28     }

　　.then()

简化$.Deferred() 注册回调函数的写法， 第一个函数 为 done,  第二个函数为 fail,  第三个函数为 progress。

回调函数可以返回值 给 下个 .then() 接收处理，如果返回的是 延迟对象 Deferred。 那么下个 .then 注册的回调函数 就是你返回的 Deferred 上注册详细使用请看以下 小例子、

简化 写法：

返回值

返回新的 deferred 对象

　　$.when()

参数： 可以是一个或多个延迟对象(Deferred)

返回值 是 promise 对象

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script src="./jquery/jquery.js"></script>
11     <script>
12
13         $.when(a(), b(), c()).then(function(){
14             console.log('成功');//当 三个延迟对象，都执行 resolve的时候， 才会执行 .then 的 第一个回调
15         },function(){
16             console.log('失败');//当 三个延迟对象，有一个执行了 reject 的时候 就会触发.then 的 第二个回调
17         })
18
19         function a(){
20             var de = $.Deferred();
21             setInterval(function(){
22                 var value =  Math.random() * 100;
23                 if(value > 20){
24                     de.resolve();
25                 }else{
26                     de.reject();
27                 }
28             }, 1000);
29             return de.promise();
30         }
31
32         function b(){
33             var de = $.Deferred();
34             setInterval(function(){
35                 var value =  Math.random() * 100;
36                 if(value > 20){
37                     de.resolve();
38                 }else{
39                     de.reject();
40                 }
41             }, 1000);
42             return de.promise();
43         }
44
45         function c(){
46             var de = $.Deferred();
47             setInterval(function(){
48                 var value =  Math.random() * 100;
49                 if(value > 20){
50                     de.resolve();
51                 }else{
52                     de.reject();
53                 }
54             }, 1000);
55             return de.promise();
56         }
57     </script>
58 </body>
59 </html>

下一章：利用 $.Deferred() 和 .then() 优化回调地狱