Promise
1.Promise
相当于一个容器,
保存着未来才会结束的事件(异步操作的结果)
各种异步操作都可以用同样的方法来处理
特点:
- 对象的状态不受外界影响,处理异步操作有三个状态
Pending(进行),Resolved(成功), Rejectd(失败)
- 一但状态改变。就不会再变, 任何时候都可以得到这个结果
let pro = new Promise(function(resolved, rejected ))
1.2封装
const getJson = function(url){
return new Promise((resolve, reject)=>{
const xhr = new XMLHtpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'json';
xhr.setRequestHeader('Accept', 'application/json');
xhr.send();
function handler(){
console.log(this)
if (this.readyState === 4){
if(this.status === 200){
resolve(this.response)
}else{
reject(new Error(this.statusText))
}
}
}
})
}
getJson(url)
.then((data)=>{
console.log(data);
},(error)=>{
console.log(error);
})
.then()
方法
- 第一个参数是
resolve
的回调函数, 第二个是可选的,是reject
回调函数
1.3通常写法
function getJson(){
}
getJson(url)
.then(data=>{
console.log(data);
}).catch(err=>{
console.log(err)
})
1.4resolve(), reject(), all()
1.4.1resove()
resolve()
方法将现有对象转换成Promise
对象,该实例的状态为fulfilled
let p = Promise.resolve('fo');
//等价于 new Promise(resolve=>resolve('fo'));
p.then((val)=>{
console.log(val);
})
1.4.2reject()
reject()
方法返回一个新的Promise
实例,该实例的状态为rejected
let p2 = Promise.reject(new Error('err'));
//等价于 let p2 = new Promise((resolve,reject)=>reject(new Error('err')));
p2.catch(err => {
console.log(err);
})
1.4.3all()
方法
all()
方法提供了并行执行异步操作的能力,并且再所有异步操作执行完后才执行回调
试想一个页面聊天系统,我们需要从两个不同的URL
分别获得用户的的个人信息和好友列表,这两个任务是可以并行执行的,用Promise.all
实现如下
let meInfoPro = new Promise( (resolve, reject)=> {
setTimeout(resolve, 500, 'P');
});
let youInfoPro = new Promise( (resolve, reject)=> {
setTimeout(resolve, 600, 'P2');
});
// 同时执行p和p2,并在它们都完成后执行then:
Promise.all([meInfoPro, youInfoPro]).then( (results)=> {
console.log(results); // 获得一个Array: ['P', 'P2']
});
1.4.4race()
方法
race
方法传参必须是数组
有些时候,多个异步任务是为了容错。比如,同时向两个URL
读取用户的个人信息,只需要获得先返回的结果即可。这种情况下,用Promise.race()
实现:
let meInfo1 = new Promise( (resolve, reject)=> {
setTimeout(resolve, 500, 'P1');
});
let meInfo2 = new Promise( (resolve, reject)=> {
setTimeout(resolve, 600, 'P2');
});
Promise.race([meInfo1, meInfo2]).then((result)=> {
console.log(result); // P1
});
Promise.all
接受一个promise
对象的数组,待全部完成之后,统一执行success
;
Promise.race
接受一个包含多个promise
对象的数组,只要有一个完成,就执行success
1.4.5例子race()
用race给某个异步请求设置超时时间,并且在超时后执行相应的操作
function requestImg(imgSrc) {
return new Promise((resolve, reject) => {
var img = new Image();
img.onload = function () {
resolve(img);
}
img.src = imgSrc;
});
}
//延时函数,3秒后执行
function timeout() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('图片请求超时');
}, 3000);
});
}
//then捕获成功,catch捕获失败
Promise.race([requestImg('images/2.png'), timeout()]).then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
});