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