Promise概述
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。使用Promise主要有以下好处:
- 可以避免多层异步调用嵌套问题(回调地狱)
- Promise对象提供了简洁的API,使得控制异步操作更加容易
Promise用法
- 实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
- resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果
var p=new Promise(function(resolve,reject){
//成功时调用resolve()
//失败时调用reject()
});
p.then(function(ret){
//从resolve得到正常结果
},function(ret){
//从reject得到错误信息
});
封装一个Promise方法,发送单个Ajax请求
function queryData(url){
var p=new Promise(function(resolve,reject){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange = function(){ //监听状态码的 变化
if(xhr.readyState !=4) return; //如果是错误的状态码则不管他
if(xhr.readyState==4 && xhr.status==200){
//处理正常的情况
resolve(xhr.responseText);
}else{
reject('错误');
}
};
xhr.open('get',url);
xhr.send(null);
})
return p;
}
queryData('http://127.0.0.1:8085/web5/ajax.php')
.then(function(data){
console.log(data)
})
发送多个请求
queryData('http://127.0.0.1:8085/web5/ajax.php')
.then(function(data){
console.log(data)
return queryData('http://127.0.0.1:8085/web5/ajax2.php')
})
.then(function(data){
console.log(data)
});
在.then内再调用一次queryData
避免了回调地狱
then参数中的函数返回值
1.返回Promise实例对象
返回的实例对象会调用下一个then
也就是.then中 return了一个Promis对象,则会调用下一个then
第二个then得到的就是返回的那个Promise对象 异步调用结果
2.返回普通值
返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
Promise常用的API
1.实例方法- p.then()得到异步任务的正确结果
- p.catch()获取异步信息
- p.finally()成功与否都会执行(尚且不是正式标准)
- Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
- Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果
all
var p1=queryData('http://127.0.0.1:8085/web5/ajax.php');
var p2=queryData('http://127.0.0.1:8085/web5/ajax2.php')
Promise.all([p1,p2]).then((result)=>{
console.log(result)
})
此时返回的是一个数组
且返回的时间是不一样的
race
var p1=queryData('http://127.0.0.1:8085/web5/ajax.php');
var p2=queryData('http://127.0.0.1:8085/web5/ajax2.php')
Promise.race([p1,p2]).then((result)=>{
console.log(result)
})
只返回了第一个请求
al需要所有的任务都完成之后才能得到结果,
race只需要完成一个任务就能得到结果