ES6新特性——8.Promise

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);
});