封装ajax和Promise

2017-09-30 21:52:30来源:CSDN作者:ganyingxie123456人点击

分享

封装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文件是自定义的文件。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台