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