ES6-----Promise

Promise异步编程的一种解决方案，可以解决v型代码、回调地狱的问题。Promise对象代表一个异步操作，有三种状态：pending（进行中）、resolved（已成功）和rejected（已失败），状态变换只能是pending——>resolved或者pending——>rejected。 Promise 的状态一旦改变，就永久保持该状态，不会再变了。

1、创建一个Promise实例
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

//创建一个Promise对象
let p = new Promise((resolve, reject) => {
    resolve(1);
});
console.log(p);//Promise {<resolved>: 1}

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject方法。执行resolve方法，会将此Promise对象的状态由pending转换成resolved；执行reject方法，会将此Promise对象的状态由pending转换成rejected。

2、Promise.prototype.then()
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法接受两个参数，第一个参数是Promise对象为resolved状态时的回调函数，第二个参数是Promise对象为rejected时的回调函数。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

let p = new Promise((resolve, reject) => {
    resolve(1);
});
p.then(data => console.log('suc' + data), err => console.log('err' + err));
//suc1

Promise 新建后就会立即执行。无论是调用resolve()还是reject()，都会向任务队列里面中添加一个任务来处理这个Promise。

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

上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出。
下面是异步加载图片的例子：

//Promise 加载图片
function loadImg(url) {
    let img = new Image();
    return new Promise((resolve, reject) => {
        img.onload = () => resolve(img);
        img.onerror = () => {
            reject(`${url} is not a valid url`);
        }
        img.src = url;
    });
}
loadImg('flower2.jpg').then((data) => {
    document.body.appendChild(data)
}, err => console.log(err));

then方法执行返回的是一个新的Promise对象。如果then方法的回调函数返回值是一个Promise对象，那么then方法返回的Promise对象的状态与回调函数返回的Promise对象状态一致；如果then方法的回调函数的返回值不是Promise对象，那么then方法会返回一个状态为resolved的Promise对象。

let p = new Promise((resolve, reject) => {
    resolve(1);
});

//then方法的回调函数返回值是一个Promise对象
let p1 = p.then(data => {
    return new Promise((resolve, reject) => {
        reject(++data);
    });
});

//then方法的回调函数返回值不是一个Promise对象
let p2 = p.then(data => {
    return ++data;
});
p1.then(null, err => console.log('err:' + err));//err:2
p2.then(data => console.log('suc', data),
        err => console.log('err', err));//suc 2

then方法返回的是一个新的Promise实例。只有当第一个Promise状态为resolved或rejected后，第二个才会被解决。因此可以采用链式写法，即then方法后面再调用另一个then方法。将上面的例子改写成链式的方式：

//then方法的回调函数返回值是一个Promise对象
p.then(data => {
    return new Promise((resolve, reject) => {
        reject(++data);
    })
}).then(data => console.log('suc:' + data),
        err => console.log('err:' + err));  //err:2

//then方法的回调函数返回值不是一个Promise对象
p.then(data => {
    return ++data;
}).then(data => console.log('suc', data),
        err => console.log('err', err));  //suc 2

3、Promise.prototype.catch()
Promise.prototype.catch方法是.then(null, reject)的别名，用于指定发生错误时的回调函数。

// 写法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error('test');
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);
});

// 写法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

注意，如果在resolve执行后再抛出错误，错误将无法捕获，这是因为 Promise 的状态一旦改变，就永久保持该状态，不会再改变。
catch方法也会返回一个Promise对象。

let p = new Promise((resolve, reject) => {
    reject('error')
});
p.catch((err) => {
    return `catch ${err}`;
}).then(data => console.log(data));//catch error

4、Promise.resolve(data)
此方法执行后，返回一个带有明确data且状态为resolved的Promise对象。

Promise.resolve('orange').then(data => console.log(data));

5、Promise.reject(data)
此方法执行后，返回一个带有明确data且状态为rejected的Promise对象。

Promise.reject('orange').catch(data => console.log(data));

6、Promise.race()
此方法需要传入一个可迭代对象（如数组）。将多个Promise对象放到该可迭代对象中。最终返回的Promise对象的状态以及传给回调函数的data值由这多个Promise对象中状态变化最快的那个决定。

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('p1'), 2000);
});
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => reject('p2'), 1000);
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('p3'), 1500);
})
Promise.race([p1, p2, p3]).then(data => console.log('suc:' + data))
    .catch(err => console.log('err:' + err));
//err:p2

7、Promise.all()
与Promise.race方法类型，Promise.all方法也需要传入一个存放多个Promise实例的可迭代对象。Promise.all()会并行执行可迭代对象中的Promise实例，只有这些个Promise对象的状态都为resolved，最终返回的Promise对象的状态才为resolved，传入回调函数里的data是一个数组，存放那些Promise执行后的数据；如果其中有一个为rejected，最终返回的Promise对象的状态就为rejected，此时传入回调函数里的参数为第一个被reject的Promise对象的数据。

let p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3),
    p4 = Promise.resolve(4);
Promise.all([p1, p2, p3, p4]).then(data => console.log(data));// [1, 2, 3, 4]

//如果更改其中一个,让其返回一个状态为rejectd的Promise对象
p3 = Promise.reject(3);
Promise.all([p1, p2, p3, p4]).catch(err => console.log(err));//3