Promise
Promise接口的基本思想是，异步任务返回一个Promise对象。
Promise对象只有三种状态。
异步操作“未完成”（pending）
异步操作“已完成”（resolved，又称fulfilled）
异步操作“失败”（rejected）
这三种的状态的变化途径只有两种。
异步操作从“未完成”到“已完成”
异步操作从“未完成”到“失败”。
这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise对象的最终结果只有两种。
异步操作成功，Promise对象传回一个值，状态变为resolved。
异步操作失败，Promise对象抛出一个错误，状态变为rejected。
作用：
主要用于异步操作或计算，将异步操作队列化；Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
Promise 优缺点
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
加载图片
我们可以把图片的加载写成一个Promise对象。
var preloadImage = function (path) {
return new Promise(function (resolve, reject) {
var image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};
Ajax操作
Ajax操作是典型的异步操作，可以使用Promise对象，就不举例了很常见。
reject方法的作用，等同于抛错。
promise对象的错误，会一直向后传递，直到被捕获。即错误总会被下一个catch所捕获。then方法指定的回调函数，若抛出错误，也会被下一个catch捕获。catch中也能抛错，则需要后面的catch来捕获。
sendRequest('test.html').then(function(data1) {
// 这里一旦报错了下面那个then不执行了直接执行 catch
//do something
}).then(function (data2) {
//do something
}).catch(function (error) {
//处理前面三个Promise产生的错误
});
promise状态一旦改变就会凝固，不会再改变。因此promise一旦fulfilled了，再抛错，也不会变为rejected，就不会被catch了。
var promise = new Promise(function(resolve, reject) {
resolve();
throw 'error';
});
promise.catch(function(e) {
console.log(e); //This is never called
});
如果没有使用catch方法指定处理错误的回调函数，Promise对象抛出的错误不会传递到外层代码，即不会有任何反应（Chrome会抛错），这是Promise的另一个缺点。
只有Chrome会抛错，且promise状态变为rejected，Firefox和Safari中错误不会被捕获，也不会传递到外层代码，最后没有任何输出，promise状态也变为rejected。
catch会把前面那些个then中没处理的异常捕获，连续的几个.then，有一个出错了后续都不执行，跳到下面最近的一个catch后继续往后执行，catch和.then都是返回一个Promise对象。
let psm = new Promise((resolve, reject) => {
setTimeout(() => { reject(100); }, 3000);
setTimeout(() => { resolve(1); }, 1000);
}).then(res => {
console.log(x); // no call
console.log(`--6--res1::${res}`);
return res + '--7';
}).then(res => { return res; }).catch(function (rr) {
console.log('catch'); // catch
console.log(`catch10::${rr}`); // catch10::ReferenceError: x is not defined
return 'catch'; // catch也会返回一个promise实例，并且是resolved状态
}).then(res => {
console.log(`res13::${res}`); // res13::catch
return res + '--14';
}).catch(function (rr) {
console.log('catch'); // no call
console.log(`res17::${rr}`);
return 'catch';
}).then(res => {
console.log(`res20::${res}`); // res20::catch--14
return res + '--21';
}).catch(function (rr) {
console.log('catch'); // no call
console.log(`res24::${rr}`);
return 'catch';
}).finally(function (res) {
console.log(res); // undefined
console.log('finally'); // finally
return 'finally';
}).then(res => {
console.log(`---res31::${res}`); // ---res31::catch--14--21
return res + '--32'; // catch--14--21--32
});
// 在下面其他地方调用 psm 时 resolve 的参数值永远为 catch--14--21--32 了，状态不可变
console.log(psm);
psm.then(r => {
console.log(r); // ---res31::catch--14--21--32
return 100;
});
psm.then(r => {
console.log(r); // ---res31::catch--14--21--32
return 1000;
}).then(r => {
console.log(r); // 1000
});
处理 抛出的异常（reject）可以这样写，但是它下面的catch就不执行了，不推荐此种写法，我更喜欢catch的写法；catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数；Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止；一般来说，使用catch方法代替then()第二个参数；Promise对象抛出的错误不会传递到外层代码，即不会有任何反应；catch()方法之中，还能再抛出错误，通过后面catch方法捕获到。
let psm = new Promise((resolve, reject) => {
setTimeout(() => { reject(100); }, 500);
setTimeout(() => { resolve(1); }, 1000);
}).then(res => {
// no call
console.log(x);
console.log(`--6--res1::${res}`);
return res + '--7';
}, err => {
// 这里执行了，下面的catch就不执行了，不推荐此种写法
console.log(err); // 100
return err + '--10';
}).catch(e => {
// no call
console.log(e);
return e;
}).then(res => {
console.log(res); // 100--10
return res;
});
let psm = new Promise((resolve, reject) => {
setTimeout(() => { reject(100); }, 2000);
setTimeout(() => { resolve(1); }, 1000);
}).then(res => {
// no call
console.log(x);
console.log(`--6--res1::${res}`);
return res + '--7';
}, err => {
// no call
console.log(err); // 100
return err + '--10';
}).catch(e => {
console.log(e); // ReferenceError: x is not defined at <anonymous>:6:15
return e;
}).then(res => {
console.log(res); // ReferenceError: x is not defined at <anonymous>:6:15
return res;
});
下面两个例子，无论是在什么时候抛异常，只要promise状态变成resolved或rejected，状态不会再改变，这和新建promise是一样的。
//在回调函数前抛异常
var p1 = {
then: function(resolve) {
throw new Error("error");
resolve("Resolved");
}
};
var p2 = Promise.resolve(p1);
p2.then(function(value) {
//not called
}, function(error) {
console.log(error); // => Error: error
});
//在回调函数后抛异常
var p3 = {
then: function(resolve) {
resolve("Resolved");
throw new Error("error");
}
};
var p4 = Promise.resolve(p3);
p4.then(function(value) {
console.log(value); // => Resolved
}, function(error) {
//not called
});
.resolve()
语法：
Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable);
它可以看做new Promise()的快捷方式。
Promise.resolve('Success');
/*******等同于*******/
new Promise(function (resolve) {
resolve('Success');
});
.reject()
语法：Promise.reject(reason)
这个方法和上述的Promise.resolve()类似，它也是new Promise()的快捷方式。
.all()
语法：Promise.all(iterable)
该方法用于将多个Promise实例，包装成一个新的Promise实例。
var p = Promise.all([p1, p2, p3]);
Promise.all方法接受一个数组（或具有Iterator接口）作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定。
当p1, p2, p3状态都变为fulfilled，p的状态才会变为fulfilled，并将三个promise返回的结果，按参数的顺序（而不是 resolved的顺序）存入数组，传给p的回调函数，如例3.8。
当p1, p2, p3其中之一状态变为rejected，p的状态也会变为rejected，并把第一个被reject的promise的返回值，传给p的回调函数，如例3.9。
/* 例3.8 */
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 3000, "first");
});
var p2 = new Promise(function (resolve, reject) {
resolve('second');
});
var p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "third");
});
Promise.all([p1, p2, p3]).then(function(values) {
console.log(values);
});
-------output-------
//约 3s 后
["first", "second", "third"]
/* 例3.9 */
var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, "one");
});
var p2 = new Promise((resolve, reject) => {
setTimeout(reject, 2000, "two");
});
var p3 = new Promise((resolve, reject) => {
reject("three");
});
Promise.all([p1, p2, p3]).then(function (value) {
console.log('resolve', value);
}, function (error) {
console.log('reject', error); // => reject three
});
-------output-------
reject three
这多个 promise 是同时开始、并行执行的，而不是顺序执行。
注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]
如果p2没有自己的catch方法，就会调用Promise.all()的catch方法
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了
allSettled()
Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例
只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束
const promises = [
fetch('/api-1'),
fetch('/api-2'),
fetch('/api-3'),
];
await Promise.allSettled(promises);
removeLoadingIndicator();
.race()
语法：Promise.race(iterable)
该方法同样是将多个Promise实例，包装成一个新的Promise实例。
顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
var p = Promise.race([p1, p2, p3]);
Promise.race方法同样接受一个数组（或具有Iterator接口）作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数。
在第一个promise对象变为resolve后，并不会取消其他promise对象的执行，如下例
/* 例3.12 */
var fastPromise = new Promise(function (resolve) {
setTimeout(function () {
console.log('fastPromise');
resolve('resolve fastPromise');
}, 100);
});
var slowPromise = new Promise(function (resolve) {
setTimeout(function () {
console.log('slowPromise');
resolve('resolve slowPromise');
}, 1000);
});
// 第一个promise变为resolve后程序停止
Promise.race([fastPromise, slowPromise]).then(function (value) {
console.log(value); // => resolve fastPromise
});
-------output-------
fastPromise
resolve fastPromise
slowPromise //仍会执行
Promise的finally并不是终结
finally 中的 return 没用
不管promise最后什么状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
new Promise(function(resolve,reject){
resolve(1)
}).finally(function(data){
console.log(data)
return 3 // 没有用
}).then(function(x){
console.log(x)
})
输出：
undefined
1
done()
Promise 对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到（因为 Promise 内部的错误不会冒泡到全局）。因此，我们可以提供一个done方法，总是处于回调链的尾端，保证抛出任何可能出现的错误。
finally 与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。
done方法的使用，可以像then方法那样用，提供fulfilled和rejected状态的回调函数，也可以不提供任何参数。但不管怎样，done都会捕捉到任何可能出现的错误，并向全局抛出。
小结
Promise对象的优点在于，让回调函数变成了规范的链式写法，程序流程可以看得很清楚。它的一整套接口，可以实现许多强大的功能，比如为多个异步操作部署一个回调函数、为多个回调函数中抛出的错误统一指定处理方法等等。
而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是，编写和理解都相对比较难。
具体可以参考：https://www.w3cschool.cn/javascript_guide/javascript_guide-a9jb269c.html
