ES6学习笔记--Promise
Promise
传统的异步编程解决方案是回调函数和事件，当回调函数嵌套过多时会变得难以阅读和维护。
Promise是一种新的异步编程解决方案，可以简单理解为将所有异步操作拎出来放在一个对象里，可以以同步的形式调用，并且可以链式操作。
Promise对象代表一个异步操作，有三种状态：Pending, Resolved, Rejected。只有异步操作的结果可以决定当前是哪种状态，其他操作无法改变。
Promise对象的状态改变只有两种可能：Pending变为Resolved, 或者Pending变为Rejected。一旦状态发生改变，就不会再次变化。
Promise一旦新建就好立即执行，无法中途取消。
基本用法
Promise构造函数接受一个函数作为参数，该函数又有两个函数作为参数，resolve和reject。
resolve函数的作用是将Promise对象的状态从Pending变为Resolved, 在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
reject函数的作用是将Promise对象的状态从Pending变为Rejected, 在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise对象的状态变为Reject时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
let promise = new Promise (function (res, rej) {
console.log('a new promise') // Promise新建后立刻执行
res();
})
promise.then(function() {
console.log('Resolved') // 当前脚本所有同步任务执行完之后才会执行
})
console.log('Hello, World')
// 'a new promise'
// 'Hello, World'
// 'Resolved'
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});
一个用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);
});
resolve函数的参数除了正常的值以外，还可能是另一个Promise的实例
var p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
var p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => console.log(result)) // 返回一个新的Promise对象p1
.catch(error => console.log(error)) // 在新的Promise对象上调用catch()方法
// Promise对象
// Error: fail
Promise的方法
Promise.prototype.then()
then方法必须接受一个函数作为参数，返回的是一个新的Promise实例，因此可以采用链式写法
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的代码使用then方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("Resolved: ", comments),
err => console.log("Rejected: ", err)
);
如果向then()传递的并非是一个函数，它实际上会将其解释为then(null)，这就会导致前一个Promise的结果会穿透下面
Promise.resolve('foo').then(Promise.resolve('bar')).then(function (result) {
console.log(result);
});
// 'foo'
Promise.prototype.catch()
catch方法是then(null, reject)的语法糖，用于指定发生错误时的回调函数
getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误！', error);
});
上面代码中，getJSON方法返回一个 Promise 对象，如果该对象状态变为Resolved，则会调用then方法指定的回调函数；如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误。另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前面三个Promise产生的错误
});
一般来说，不用在then方法里定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法，因为catch方法可以捕获前面所有then的错误，也更接近同步的写法（try/catch）。
// bad
promise
.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise
.then(function(data) { //cb
// success
})
.catch(function(err) {
// error
});
catch方法返回的也是一个Promise对象，因此后面还可以接着调用then方法
var someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错，因为x没有声明
resolve(x + 2);
});
};
someAsyncThing()
.catch(function(error) {
console.log('oh no', error);
})
.then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on
上面代码运行完catch方法指定的回调函数，会接着运行后面那个then方法指定的回调函数。如果没有报错，则会跳过catch方法。
Promise.resolve()
.catch(function(error) {
console.log('oh no', error);
})
.then(function() {
console.log('carry on');
});
// carry on
上面的代码因为没有报错，跳过了catch方法，直接执行后面的then方法。此时，要是then方法里面报错，就与前面的catch无关了
catch方法之中，还能再抛出错误。
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
// 下面一行会报错，因为y没有声明
y + 2;
}).catch(function(error) {
console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]
Promise.all()
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
var p = Promise.all([p1, p2, p3]);
Promise.all方法接受一个数组作为参数，p1、p2、p3都是Promise对象的实例，如果不是，就会先调用Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例。）
p的状态由p1、p2、p3决定，分成两种情况。
-
（1）只有p1、p2、p3的状态都变成resolved，p的状态才会变成resolved，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
-
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
return getJSON("/post/" + id + ".json");
});
Promise.all(promises).then(function (posts) {
// ...
}).catch(function(reason){
// ...
});
上面代码中，promises是包含6个Promise实例的数组，只有这6个实例的状态都变成resolved，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数。
Promise.race()
Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。
var p = Promise.race([p1, p2, p3]);
上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
]);
p.then(response => console.log(response));
p.catch(error => console.log(error));
Promise.resolve()
将传入的对象转为Promise对象，如果不传参数则直接得到一个状态为Resolved的Promise对象。
立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。
setTimeout(function () {
console.log('three');
}, 0);
Promise.resolve().then(function () {
console.log('two');
});
console.log('one');
// one
// two
// three
Promise.reject()
返回一个状态为rejected的Promise对象
var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {
console.log(s)
});
// 出错了
Promise.prototype.done()
Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为Promise内部的错误不会冒泡到全局）。
因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。
Promise.prototype.done = function (onResolved, onRejected) {
this.then(onResolved, onRejected)
.catch(function (reason) {
// 抛出一个全局错误
setTimeout(() => { throw reason }, 0);
});
};
Promise.prototype.finally()
finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
一道 Promise 面试题：
下面三个 Promise 对象捕获错误的例子，返回的结果有什么不同？
//使用throw添加错误事件
var p = new Promise(function(resolve, reject) {
resolve("ok");
throw new Error('error0');
//setTimeout(function() { throw new Error('error1') }, 0);
});
p.then(function(value){
console.log(value)
})
.catch(funcrion(err){
console.log(err)
});
//设置定时器来抛出错误事件
var p = new Promise(function(resolve, reject) {
resolve("ok");
//throw new Error('error0');
setTimeout(function() { throw new Error('error1') }, 0);
});
p.then(function(value){
console.log(value)
})
.catch(funcrion(err){
console.log(err)
});
//同时添加错误事件
var p = new Promise(function(resolve, reject) {
resolve("ok");
throw new Error('error0');
setTimeout(function() { throw new Error('error1') }, 0);
});
p.then(function(value){
console.log(value)
})
.catch(funcrion(err){
console.log(err)
});
