Promise的概述
Promise是异步编程的一种解决方式,从语法上讲,Promise是一个对象,它可以获取异步操作的消息。
由于异步操作存在返回的顺序不确定,如果想要返回顺序确定的话就需要嵌套(回调地狱),Promise就可以解决这一个问题,并且Promise对象提供了简洁的API,使异步操作更加简单
Promise的用法
<script type="text/javascript">
var p = new Promise(function(resolve,reject){
setTimeout(function(){
var flag = false;
if(flag){
//正常情况得到真实的数据
resolve('hello');
}else{
//异常的情况
reject('出错了')
}
},100);
})
p.then(function(data){
console.log(data)
},function(info){
console.log(info)
})
</script>
Promise处理Ajax请求
function queryData(url){
var p = new Promise(function(resolve,reject){
var xhr = new XHTMLHttpRequest();
xhr.onreadyStatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState ==4 && xhr.state == 200) {
resolve(xhr.responseText);
}else{
reject(error)
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
}
queryData('url地址').then(function(data){
console.log(data)
},function(info){
console.log(info)
})
Promise发送多个ajax请求并且保证顺序
function queryData(url){
var p = new Promise(function(resolve,reject){
var xhr = new XHTMLHttpRequest();
xhr.onreadyStatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState ==4 && xhr.state == 200) {
resolve(xhr.responseText);
}else{
reject(error)
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
}
// 发送多个ajax请求并且保证顺序
queryData('url地址').then(function(data){
console.log(data);
return queryData('url地址');
}).then(function(data){
console.log(data);
return queryData('url地址');
}).then(function(data){
console.log(data);
});
Promise的常用API
- 实例方法
1.p.then:得到异步任务的正确结果
2.p.catch:获取异常信息
3.p.finally:成功与否都会执行(可以用于销毁一些不用的函数)
- 对象方法
promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
//promise.all()
function queryData(url){
return new Promise(function(resolve,reject){
var xhr = new XHTMLHttpRequest();
xhr.onreadyStatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState ==4 && xhr.state == 200) {
resolve(xhr.responseText);
}else{
reject(error)
}
};
xhr.open('get',url);
xhr.send(null);
});
}
var p1 = queryData('地址1')
var p2 = queryData('地址2')
var p3 = queryData('地址3')
Promise.all([p1,p2,p3]).then(function(result){
console.log(result)
})
//promise.race()
function queryData(url){
return new Promise(function(resolve,reject){
var xhr = new XHTMLHttpRequest();
xhr.onreadyStatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState ==4 && xhr.state == 200) {
resolve(xhr.responseText);
}else{
reject(error)
}
};
xhr.open('get',url);
xhr.send(null);
});
}
var p1 = queryData('地址1')
var p2 = queryData('地址2')
var p3 = queryData('地址3')
Promise.race([p1,p2,p3]).then(function(result){
console.log(result)
})