概述
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息
使用Promise主要有以下好处:
- 可以避免多层异步调用嵌套问题(回调地狱)
- Promise对象提供了简洁的API,使得控制异步操作更加容易
promise的基本用法
实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况,并通过.then获取处理结果
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败
)
-
promise 就是一个语法
-
我们的每一个异步事件,在执行的时候都会有三个状态,执行中 / 成功 / 失败
-
resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
-
reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
-
promise有三个状态:
-
pending[待定]初始状态
-
fulfilled[实现]操作成功
-
rejected[被否决]操作失败
当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;
promise状态一经改变,不会再变。
-
Promise对象的状态改变,只有两种可能:
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生,状态就凝固了,不会再变了。
基于promise处理ajax请求
function queryData(){
return new Promise(function(resolve,reject){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState !=4) return;
if(xhr.status==200){
resolve(xhr.responseText)
}else{
reject('出错了')
}
}
xhr.open('get','/data');
xhr.send(null);
})
}
多次发送ajax请求
queryData()
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
});
then参数中函数返回值
-
返回Promise实例对象
返回的该实例对象会调用下一个then
-
返回普通值
返回的普通值会传递给下一个then,通过then参数中函数的参数接收该值
promise常用的API
-
实例方法
p.then() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行(尚且不是正式标准)
queryData() .then(function(data){ console.log(data); }) .catch(function(data){ console.log(data); }) .finally(function(data){ console.log('finished'); });
-
对象方法
Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.all([p1,p2,p3]).then((result)=>{
console.log(result)
})
Promise.race([p1,p2,p3]).then((result)=>{
console.log(result)
})