Promise.allSettled的使用简介与功能实现

Promise是一种异步编程的解决方案，它能够解决一些常见的异步编程所带来的困扰（例如回调地狱），配合ES7的async和await操作符，编写异步代码那叫一个爽~~~。自从ES6诞生至今，每年都会添加了一些新的API，大部分可以通过polyfill兼容不支持新功能的浏览器，而最新的ES2020标准已出，最新的方案中Promise添加了allSettled的静态方法（还有any方法，不过正处于stage3，此处不做多余陈述，有兴趣可以参考此链接 http://es6.ruanyifeng.com/#docs/promise#Promise-any），由于此方法由ES2020引入，浏览器的兼容也不是很普及，所以需要添加polyfill，以下是本人参考规范完成的一个polyfill的demo（如有不足之处，还望大家指教）：

Promise.allSettled = Promise.allSettled || function (arr) {
      var P = this;
      return new P(function(resolve,reject) {
        if(Object.prototype.toString.call(arr) !== '[object Array]') {
	  return reject(new TypeError(typeof arr + ' ' + arr +
          ' ' +' is not iterable(cannot read property Symbol(Symbol.iterator))'));
	}
	var args = Array.prototype.slice.call(arr);
	if (args.length === 0) return resolve([]);
	var arrCount = args.length;

	function resolvePromise(index, value) {
	  if(typeof value === 'object') {
	    var then = value.then;
	    if(typeof then === 'function'){
	      then.call(value,function(val) {
	        args[index] = { status: 'fulfilled', value: val};
	          if(--arrCount === 0) {
	             resolve(args);
                  }
	       }, function(e) {
                 args[index] = { status: 'rejected', reason: e };
	         if(--arrCount === 0) {
                   resolve(args);
                 }
               })
             }
           }
         }

          for(var i = 0; i < args.length; i++){
            resolvePromise(i, args[i]);
          }
       })
     }

allSettled的特性与使用：

与Promise.all一样，参数是一组包含Promise实例的数组，返回值是一个新的Promise实例，其实例在调用then方法中的回调函数的参数仍是一个数组。不同之处在于无论参数实例resolve还是reject，Promise.allSettled都会执行then方法的第一个回调函数（意思就是不会catch到参数实例的reject状态），其回调函数的参数返回的数组的每一项是一个包含status和value或者reason的一组对象。status代表对应的参数实例状态值，取值只有fulfilled（resolve状态）和rejected（reject状态），当status的值为rejected，对应的另一个对象属性就是reason了，也就是被reject的原因，而成功返回的status的值则是fulfilled，对应的另一个对象属性便是value，对应的值就是resolve的任意值。

var promise1 = new Promise(function(resolve,reject){
  setTimeout(function(){
    reject('promise1')
  },2000)
})
			
var promise2 = new Promise(function(resolve,reject){
  setTimeout(function(){
    resolve('promise2')
  },3000)
})

var promise3 = Promise.resolve('promise3')

var promise4 = Promise.reject('promise4')

Promise.allSettled([promise1,promise2,promise3,promise4]).then(function(args){
  console.log(args);
  /*
  result: 
  [
    {"status":"rejected","reason":"promise1"}, 
    {"status":"fulfilled","value":"promise2"},
    {"status":"fulfilled","value":"promise3"}, 
    {"status":"rejected","reason":"promise4"}
  ]*/
})

使用场景：

在Promise.allSettled出现以前，对于需要发送一组ajax请求都是使用Promise.all去处理，待所有参数实例都resolve则可以继续执行下一步操作，但这样会有个弊端，若是有一个参数实例reject，则直接会进入到catch里面，即使其它实例参数resolve也是如此，Promise.all方法resolve的条件在于参数数组中的所有Promise实例都需要resolve才可以，这样显然在一些业务中不适用的，假如一个模块需要显示三部分内容，每一部分内容都有一个返回Promise实例的接口，如果使用Promise.all需要三个接口都成功返回数据才可以，如果有一个接口挂掉了，则另外两个接口返回的数据不能被获取到，因为此时已经进入到了catch方法，无法在成功回调的函数里面操作数据，渲染界面等。此时Promise.allSettled便派上用场了。无论参数实例是否reject，最终Promise.allSettled内部都会resolve，只不过会添加一个状态status来记录对应的参数实例是否执行成功。我们可以依据这个状态去过滤掉rejected的数据，只操作fulfilled的数据，就会得到我们想要的业务逻辑了。

关于此方法的具体使用和介绍，请参考这个链接 http://es6.ruanyifeng.com/#docs/promise#Promise-allSettled