什么是Promise
- Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作
- Promise有以下三种状态：
- pending： 初始值
- fulfilled： 代表操作成功
- rejected： 代表失败
- Promise有两种状态转变方式：
- pending转变为fulfilled
- pending转变为rejected
- 一旦状态改变，就“凝固”了，会一直保持这个状态，不会再发生变化。当状态发生变化，promise.then绑定的函数就会被调用
Promise实例的使用
var promise = new Promise(function(resolve, reject){
if(异步操作成功){
resolve(data)
}else{ //表示异步操作失败
reject(error)
}
}
注意：Promise一旦新建就会立即执行
构造函数Promise接受一个函数作为参数，该函数的参数分别是resolve,reject，分别代表两个回调函数。
- resolve函数的作用是：在异步操作成功时调用，并将异步操作的结果作为参数传递出去
- reject函数的作用是：在一步操作失败时调用，并将异步操作报出的错误作为参数传递出去
Promise实例生成后，可以使用then方法指定fulfilled状态和reject状态的回调函数
promise.then(onFulfilled, onRejected);
promise.then(function(data){ ---->对应着上面代码中，异步操作成功时的resolve函数
}, function(error){ ---> 对应着上面代码中，异步操作失败时的reject函数
});
在then方法中指定的回调函数，将在当前脚本所有同步任务执行完之后才会执行。
.then()
new Promise(function(resolve,reject){
resolve(1);
}).then(function(data1){
console.log(data1);
//resolve(2) 注意 resolve在当前环境中是不存在的
return 2 // 直接 return结果，则会将该结果传递个下一个then()中指定的函数
}).then(function(data2){
console.log(data2);
})
.catch()
该方法是.then(undefined, onRejected)的别名，用于指定发生错误时的回调函数。
promise.then(function(data) {
console.log('success');
}).catch(function(error) {
console.log('error', error);
});
promise对象的错误，会一直向后传递，直到被捕获。即错误总会被下一个catch所捕获。then方法指定的回调函数，若抛出错误，也会被下一个catch捕获。catch中也能抛错，则需要后面的catch来捕获。
sendRequest('test.html').then(function(data1) {
//do something
}).then(function (data2) {
//do something
}).catch(function (error) {
//处理前面三个Promise产生的错误
});
Promise中的一些方法(Promise上的方法)
.all()
该方法用于将多个Promise实例，包装成一个新的Promise实例
// p1,p2,p3都是promise实例
var p = Promise.all([p1, p2, p3]);
新的Promise实例的状态由三个promise实例共同决定
- 当三个promise实例的状态都变为fulfilled，p的状态才会变为fulfilled，并将三个promise返回的结果，按照参数顺序存入数组，传给p的回调函数
- 当p1, p2, p3其中之一状态变为rejected，p的状态也会变为rejected，并把第一个被reject的promise的返回值，传给p的回调函数
.race()
该方法用于将多个Promise实例，包装成一个新的Promise实例
// p1,p2,p3都是promise实例
var p = Promise.race([p1, p2, p3]);
新的Promise实例的状态由三个promise实例共同决定
- 当p1, p2, p3其中之一状态发生改变（变为fulfilled或者rejected），p的状态也会随之改变，并把第一个改变状态的promise的返回值，传给p的回调函数
.resolve()
Promise.resolve方法的参数分为四种情况
- 参数是一个Promise实例
如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
- 参数是一个thenable对象
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value); // 42
});
Promise.resolve方法会将这个对象转为Promise对象，然后就立即执行thenable对象的then方法。
- 参数不是具有then方法的对象，或根本就不是对象
如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved。
Promise.resolve('Success');
/*******等同于*******/
new Promise(function (resolve) {
resolve('Success');
});
- 不带任何参数
直接返回一个Resolved状态的Promise对象。
Promise.resolve('Success');
/*******等同于*******/
new Promise(function (resolve) {
resolve();
});
.reject()
Promise.reject(new Error('error'));
/*******等同于*******/
new Promise(function (resolve, reject) {
reject(new Error('error'));
});
这段代码会让这个Promise对象立即进入rejected状态，并将错误对象传递给then指定的onRejected回调函数。
应用
- Promise应用于异步加载图片
function loadImageAsync(url){
return new Promise(function(resolve, reject){
var image = new Image()
image.onload = function(){
resolve(image)
}
image.onerror = function(){
reject(new Error('could not load image at ' + url))
}
image.src = url;
})
}
- 用Promise对象实现Ajax操作的例子
var getJSON = function(url){
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open('GET', url)
client.onreadystatechange = handler
client.responseType = 'json'
client.setRequestHeader('Accept'. 'application/json')
client.send()
function handler(){
if(this.readyState !=4){
return
}
if(this.status == 200){
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
})
return promise
}
getJSON('/posts.json').then(function(json){
console.log('Contents: '+json)
}. function(error){
console.error('出错了' + error)
})
