封装ajax和Promise

封装ajax和Promise

一、ajax

ajax 全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML） 是指一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果。

优点：
a、不需要插件支持
b、页面无刷新，使用异步方式与服务器通信，具有更加迅速的响应能力，优秀的用户体验
c、提高Web程序的性能
d、可以把以前一些服务器负担的工作转到客户端，利用客户端闲置的能力来处理，减轻服务器的负担，由于ajax的原则是“按需取数据”，所以就可以最大程度的减少冗余请求，提高性能。

缺点：
a、破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补 。
b、对搜索引擎的支持不足。
c、安全问题：ajax暴露了与服务器交互的细节。

二、Promise

Pomise是es6中的一个异步处理对象，从它可以获取异步操作的消息，特点：

1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)和rejected(已失败）。

2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

三、ajax和Promise封装

    // (原生js)封装Promise对象和ajax过程    var jsGetAjaxPromise = function(param){        return new Promise(function(resolve, reject ){            var xhr = new XMLHttpRequest();            xhr.open('get', param.url, true);            xhr.onload = resolve;            xhr.onerror = reject;            xhr.send();        })    }    // 调用示例    var p1 = jsGetAjaxPromise({  // 启动第一个任务        url: 'cross-domain1.txt' // 要获取的文件地址    });    p1.then(function(response){  // 处理第一个异步任务的结果(每次调用then都会返回一个新创建的Promise对象)        console.log(response);        return jsGetAjaxPromise({ // 启动第二个任务             url: 'cross-domain2.txt'        })    }).then(function(response2){  // 处理第二个任务的结果        console.log(response2);        return jsGetAjaxPromise({ // 启动第三个任务              url: 'cross-domain3.txt'        })    }).then(function(response3){  // 处理第二个任务的结果        console.log(response3);    }).catch(function(err){        console.log(err);    });

改写成jquery实现

    // (jquery)封装Promise对象和ajax过程    var jqGetAjaxPromise = function(param){        return new Promise(function(resolve, reject){            $.ajax({                url: param.url,                type: 'get',                data: param.data || '',                success: function(data){                    resolve(data);                },                error: function(error){                    reject(error)                }            });        });    };    // 调用示例    var p2 = jqGetAjaxPromise({            url: 'cross-domain1.txt'    });    p2.then(function(data){              console.log(data);        return jqGetAjaxPromise({              url:'cross-domain2.txt'        });    }).then(function(data2){           console.log(data2);    }).catch(function(err){        console.log(err);    });

PS： 由于涉及ajax，所以本文中所有的代码都在wamp服务器上运行的， cross-domain.txt文件是自定义的文件。