ES6 Promise

ES6 Promise 对象
一、概述
是异步编程的一种解决方案。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
Promise 状态
状态的特点
Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

const p1 = new Promise(function(resolve,reject){
resolve(‘success1’);
resolve(‘success2’);
});
const p2 = new Promise(function(resolve,reject){
resolve(‘success3’);
reject(‘reject’);
});
p1.then(function(value){
console.log(value); // success1
});
p2.then(function(value){
console.log(value); // success3
});

状态的缺点
无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。

如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
二、基本用法
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject) {
// … some code
if (/ 异步操作成功 /){
resolve(value);
} else {
reject(error);
}
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
// success
}, function(error) {
// failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。
下面是一个Promise对象的简单例子。

 <button @click="addReturnPromise">练习方法返回一个Promise实例</button>

 timeout(ms){return new Promise((resolve, reject) => {setTimeout(resolve, ms, "done");});},addReturnPromise() {this.timeout(1000).then((value) => {console.log(value);})},

timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。
Promise 新建后就会立即执行。

<button @click="addPromiseSort">练习执行顺序相关</button>

 addPromiseSort() {let promise = new Promise(function (resolve, reject) {console.log("Promise");resolve();});promise.then(function () {console.log("resolved.");});console.log("Hi!");},

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
下面是一个用Promise对象实现的 Ajax 操作的例子。

const getJSON = function(url) {
const promise = new Promise(function(resolve, reject){
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();
client.open(“GET”, url);
client.onreadystatechange = handler;
client.responseType = “json”;
client.setRequestHeader(“Accept”, “application/json”);
client.send();
});
return promise;
};
getJSON(“/posts.json”).then(function(json) {
console.log('Contents: ’ + json);
}, function(error) {
console.error(‘出错了’, error);
});

如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例，比如像下面这样。

<button @click="addPPromise">练习resolve函数的参数除了正常的值以外，还可能是另一个 Promise 实例</button>

 addPPromise() {var p1 = new Promise(function (resolve, reject) {// resolve("11");reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve(p1);});console.log(p2);},

addPPromise() {var p1 = new Promise(function (resolve, reject) {resolve("11");// reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve(p1);});console.log(p2);},

注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error(‘fail’)), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
// Error: fail

上面代码中，p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。
注意，调用resolve或reject并不会终结 Promise 的参数函数的执行。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log®;
});
// 2
// 1
上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的语句不会执行
console.log(2);
})

三、Promise.all方法，Promise.race方法
Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
var p = Promise.all([p1,p2,p3]);
Promise.all 方法接受一个数组作为参数，p1、p2 都是 Promise 对象的实例。（Promise.all 方法的参数不一定是数组，但是必须具有 iterator 接口，且返回的每个成员都是 Promise 实例。）

p 的状态由 p1、p2 决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

 <button @click="addPromiseAll">练习Promise.all</button>

   addPromiseAll() {console.log("addPromiseAll");var p1 = new Promise(function (resolve, reject) {resolve("66");// reject("44");});var p2 = new Promise(function (resolve, reject) {resolve("55");});var p = Promise.all([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},

  <button @click="addPromiseAll">练习Promise.all</button>

 addPromiseAll() {console.log("addPromiseAll");var p1 = new Promise(function (resolve, reject) {// resolve("66");reject("44");});var p2 = new Promise(function (resolve, reject) {resolve("55");});var p = Promise.all([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},

Promise.race 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

var p = Promise.race([p1,p2,p3]);
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。

如果Promise.all方法和Promise.race方法的参数，不是Promise实例，就会先调用下面讲到的Promise.resolve方法，将参数转为Promise实例，再进一步处理。

  <button @click="addPromiseRace">练习Promise.race</button>

 addPromiseRace() {var p1 = new Promise(function (resolve, reject) {resolve("11");// reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve("22");});var p3 = new Promise(function (resolve, reject) {resolve("33");});var p = Promise.race([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},

  <button @click="addPromiseRace">练习Promise.race</button>

 addPromiseRace() {var p1 = new Promise(function (resolve, reject) {// resolve("11");reject("xx");});var p2 = new Promise(function (resolve, reject) {resolve("22");});var p3 = new Promise(function (resolve, reject) {resolve("33");});var p = Promise.race([p1, p2]);console.log(p);p.then(function (value) {console.log("value", value);}).catch(function (reason) {console.log("reason", reason);});},