深入理解 Promise

一、Promise 的定义

1、回调地狱

回调地狱即大量的回调函数嵌套（a => b => c => d），回调层数越深，那么回调的维护成本越高。

示例：

function loadScript(src, callback) {
  let script = document.createElement('script')
  script.src = src
  script.onload = () => {
    callback(src)
  }
  document.head.append(script)
}

function test(name) {
  console.log(name)
}
loadScript('./1.js', function (script) {
  console.log(script)
  loadScript('./2.js', function (script) {
    console.log(script)
    loadScript('./3.js', function (script) {
      console.log(script)
      //...
    })
  })
})

// 1
// ./1.js
// 2
// ./2.js
// 3
// ./3.js

虽然回调函数是所有异步编程方案的根基，如果直接使用传统回调方式去完成复杂的异步流程，就会无法避免大量的回调函数嵌套，导致回调地狱。为了避免这个问题，CommonJS 社区提出了 Promise 的规范，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。

2、什么是 Promise

ES6 Promise 是异步编程的一种解决方案，Promise 对象用于表示一个异步操作的最终状态（完成或失败）以及返回的值。

换句话说，Promise 就是一个容器，里面保存着某个异步操作的结果。Promise 对象可以获取异步操作的消息。

注意：Promise 本身是同步的立即执行函数。

3、Promise 的状态

• pending：进行中
• fulfilled：已成功
• rejected：已失败

Promise 的状态只有两种可能，从 pending 变为 fulfilled 和 从 pending 变为 rejected，一旦状态变化，就不会再改变。

4、Promise 的缺点

• 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
• 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
• 当处于 pending 状态时，无法得知目前进展到哪一个阶段。

二、基本用法

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 JS 引擎提供的 resolve 函数和 reject 函数。

var promise = new Promise((resolve, reject) => {
  if (操作成功) {
    resolve(value)
  }
  else {
    reject(error)
  }
});

promise.then(function (value) {
  // success (接收 resolve 传来的数据，做些什么)
}, function (error) {
  // failure (接收 reject 传来的数据，做些什么)
});

1、resolve 与 reject 函数

• resolve 函数将 Promise 对象的状态从 pending（进行中）变为 resolved（成功），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。

• reject 函数将 Promise 对象的状态从 pending（进行中）变为 rejected（失败），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

1-1、例子：用 Promise 实现异步加载图片

function loadImageAsync(url) {
  return new Promise(function (resolve, reject) {
    const image = new Image();

    image.onload = function () {
      resolve(image);
    };

    image.onerror = function () {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}

上面代码中，使用 Promise 包装了一个图片加载的异步操作。如果加载成功，就调用 resolve 方法，否则就调用 reject 方法。

1-2、例子：用 Promise 对象实现 Ajax 操作

function ajax(url) {
  return new Promise((resolve, rejects) => {
    // 创建一个 XMLHttpRequest 对象去发送一个请求
    const xhr = new XMLHttpRequest()
    // 先设置一下 xhr 对象的请求方式是 GET，请求的地址就是参数传递的 url
    xhr.open('GET', url)
    // 设置返回的类型是 JSON，是 HTML5 的新特性
    // 我们在请求之后拿到的是 JSON 对象，而不是字符串
    xhr.responseType = 'json'
    // html5 中提供的新事件,请求完成之后（readyState为4）才会执行
    xhr.onload = () => {
      if (this.status === 200) {
        // 请求成功将请求结果返回
        resolve(this.response)
      } else {
        // 请求失败，创建一个错误对象，返回错误文本
        rejects(new Error(this.statusText))
      }
    }
    // 开始执行异步请求
    xhr.send()
  })
}

ajax('/api/user.json').then((res) => {
  console.log(res)
}, (error) => {
  console.log(error)
})

2、then 方法

Promise 实例生成以后，可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数。

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

getJSON("/post/1.json").then(
  post => getJSON(post.commentURL)
).then(
  comments => console.log("resolved: ", comments),
  err => console.log("rejected: ", err)
);

then 方法返回的是一个新的 Promise 实例，可以采用链式写法，继续使用 then 来处理后续的任务，这就实现了 Promise 的链式调用。

三、Promise 的 API

1、Promise.catch()

Promise.catch() 方法用于指定发生错误时的回调函数。

promise.catch(function (error) {
  // failure (接收 reject 传来的数据或捕捉到 then() 中的运行报错时，做些什么)
});

catch 方法是 .then(null, rejection) 的别名：

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));

2、Promise.resolve()

有时需要将现有对象转为 Promise 对象，Promise.resolve() 方法就起到这个作用。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.resolve() 的参数分成四种情况：

2-1、参数是一个 Promise 实例

如果参数是 Promise 实例，那么 Promise.resolve 将不做任何修改、原封不动地返回这个实例。

2-2、参数是一个 thenable 对象

thenable 对象指的是具有 then 方法的对象，比如下面这个对象：

let thenable = {
  then: function (resolve, reject) {
    resolve(42);
  }
};

Promise.resolve() 方法会将这个对象转为 Promise 对象，然后就立即执行 thenable 对象的 then() 方法。

let thenable = {
  then: function (resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function (value) {
  console.log(value);  // 42
});

上面代码中，thenable 对象的 then() 方法执行后，对象 p1 的状态就变为 resolved，从而立即执行最后那个 then() 方法指定的回调函数，输出 42。

2-3、参数不是具有 then 方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有 then() 方法的对象，则 Promise.resolve() 方法返回一个新的 Promise 对象，状态为 resolved。

const p = Promise.resolve('Hello');

p.then(function (s) {
  console.log(s)
});
// Hello

上面代码生成一个新的 Promise 对象的实例 p。由于字符串 Hello 不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是 resolved，所以回调函数会立即执行。Promise.resolve() 方法的参数，会同时传给回调函数。

2-4、不带有任何参数

Promise.resolve() 方法允许调用时不带参数，直接返回一个 resolved 状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用 Promise.resolve() 方法。

const p = Promise.resolve();

p.then(function () {
  // ...
});

上面代码的变量 p 就是一个 Promise 对象。

需要注意的是，立即 resolve() 的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而非下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');

// one
// two
// three

上面代码中，setTimeout(fn, 0) 在下一轮“事件循环”开始时执行，Promise.resolve() 在本轮“事件循环”结束时执行，console.log('one') 则是立即执行，因此最先输出。

3、Promise.reject()

Promise.reject(reason) 方法也会返回一个新的 Promise 实例，该实例的状态为 rejected。

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

上面代码生成一个 Promise 对象的实例 p，状态为 rejected，回调函数会立即执行。

Promise.reject() 方法的参数，会原封不动地作为 reject 的理由，变成后续方法的参数。

Promise.reject('出错了')
.catch(e => {
  console.log(e === '出错了')
})
// true

上面代码中，Promise.reject() 方法的参数是一个字符串，后面 catch() 方法的参数 e 就是这个字符串。

4、Promise.all()

Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

const p = Promise.all([p1, p2, p3]);

上面代码中，Promise.all() 方法接受一个数组作为参数，p1、p2、p3 都是 Promise 实例（如果不是 Promise 实例会先调用 Promise.resolve 方法转为 Promise 实例）

另外，Promise.all() 方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

上面 p 的状态由 p1、p2、p3 决定，分成两种情况：

• 只有 p1、p2、p3 的状态都变成 fulfilled，p 的状态才会变成 fulfilled，此时 p1、p2、p3 的返回值组成一个数组，传递给 p 的回调函数。

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

举个例子：

function getData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第一条数据加载成功');
      resolve('data1');
    }, 1000);
  });
}

function getData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第二条数据加载成功');
      resolve('data2');
    }, 1000);
  });
}

function getData3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第三条数据加载成功');
      resolve('data3');
    }, 1000);
  });
}

function getData4() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第四条数据加载成功');
      resolve('data4');
    }, 2000);
  });
}

let p = Promise.all([getData1(), getData2(), getData3(), getData4()]);

p.then(arr => {
  console.log(arr);
});

// 第一条数据加载成功
// 第二条数据加载成功
// 第三条数据加载成功
// 第四条数据加载成功
// ['data1', 'data2', 'data3', 'data4']

上面代码中，只有 getData1、getData2、getData3、getData4 的状态都变成 fulfilled，Promise 的状态才会变成 fulfilled，此时 getData1、getData2、getData3、getData4 的返回值组成一个数组，传递给 Promise 的回调函数。

function getData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第一条数据加载成功');
      resolve('data1');
    }, 1000);
  });
}

function getData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第二条数据加载成功');
      resolve('data2');
    }, 1000);
  });
}

function getData3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第三条数据加载成功');
      resolve('data3');
    }, 1000);
  });
}

function getData4() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // console.log('第四条数据加载成功');
      reject('data4 err');
    }, 500);
  });
}

let p = Promise.all([getData1(), getData2(), getData3(), getData4()]);

p.then(arr => {
  console.log(arr);
}, e => {
  console.log(e);
});

// data4 err
// 第一条数据加载成功
// 第二条数据加载成功
// 第三条数据加载成功

上面代码中，只要 getData1、getData2、getData3、getData4 之中有一个被 rejected，Promise 的状态就变成 rejected，此时第一个被 reject 的实例的返回值，会传递给 Promise 的回调函数。

5、Promise.race()

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

与 Promise.all() 方法的区别是：Promise.race([p1, p2, p3]) 里面哪个结果获得的快，就返回哪个结果，不管结果本身是成功状态还是失败状态。

const p = Promise.race([p1, p2, p3]);

上面代码中，只要 p1、p2、p3 之中有一个实例率先改变状态，p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给 p 的回调函数。

举个例子：

function getData1() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第一条数据加载成功');
      reject('err');
    }, 500);
  });
}

function getData2() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第二条数据加载成功');
      resolve('data2');
    }, 1000);
  });
}

function getData3() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('第三条数据加载成功');
      resolve('data3');
    }, 1000);
  });
}

let p = Promise.race([getData1(), getData2(), getData3()]);

p.then(data => {
  console.log(data);
}, e => {
  console.log(e);
})

// 第一条数据加载成功
// err
// 第二条数据加载成功
// 第三条数据加载成功

6、Promise.any()

ES2021 引入了Promise.any()方法。该方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例返回。

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {  // 只要有一个 fetch() 请求成功
  console.log(first);
}).catch((error) => { // 所有三个 fetch() 全部请求失败
  console.log(error);
});

只要参数实例有一个变成 fulfilled 状态，包装实例就会变成 fulfilled 状态；

如果所有参数实例都变成 rejected 状态，包装实例就会变成 rejected 状态。

Promise.any() 跟 Promise.race() 方法很像，只有一点不同，就是 Promise.any() 不会因为某个 Promise 变成 rejected 状态而结束，必须等到所有参数 Promise 变成 rejected 状态才会结束。

下面是 Promise() 与 await 命令结合使用的例子。

const promises = [
  fetch('/endpoint-a').then(() => 'a'),
  fetch('/endpoint-b').then(() => 'b'),
  fetch('/endpoint-c').then(() => 'c'),
];

try {
  const first = await Promise.any(promises);
  console.log(first);
} catch (error) {
  console.log(error);
}

上面代码中，Promise.any() 方法的参数数组包含三个 Promise 操作。其中只要有一个变成 fulfilled，Promise.any() 返回的 Promise 对象就变成 fulfilled。如果所有三个操作都变成 rejected，那么 await 命令就会抛出错误。

Promise.any() 抛出的错误，不是一个一般的 Error 错误对象，而是一个 AggregateError 实例。它相当于一个数组，每个成员对应一个被 rejected 的操作所抛出的错误。下面是 AggregateError 的实现示例：

// new AggregateError() extends Array

const err = new AggregateError();
err.push(new Error("first error"));
err.push(new Error("second error"));
// ...
throw err;

7、Promise.finally()

Promise.finally() 方法用于指定无论 Promise 对象最后状态如何都会执行的操作。

promise
  .then(result => {··· })
  .catch(error => {··· })
  .finally(() => {
    // 不管什么状态都执行此函数
  });

8、Promise.allSettled()

有时候，我们希望等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。但现有的 Promise 方法很难实现这个要求。

Promise.all() 方法只适合所有异步操作都成功的情况，如果有一个操作失败，就无法满足要求。

const urls = [url_1, url_2, url_3];
const requests = urls.map(x => fetch(x));

try {
  await Promise.all(requests);
  console.log('所有请求都成功。');
} catch {
  console.log('至少一个请求失败，其他请求可能还没结束。');
}

上面示例中，Promise.all() 可以确定所有请求都成功了，但只要有一个请求失败，它就会报错，而不管另外的请求是否结束。

为了解决这个问题，ES2020 引入了 Promise.allSettled() 方法，用来确定一组异步操作是否都结束了（不管成功或失败）。所以，它的名字叫做”Settled“，包含了 fulfilled 和 rejected 两种情况。

Promise.allSettled() 方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更（不管是 fulfilled 还是 rejected），返回的 Promise 对象才会发生状态变更。

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];

await Promise.allSettled(promises);
removeLoadingIndicator();

上面示例中，数组 promises 包含了三个请求，只有等到这三个请求都结束了（不管请求成功还是失败），removeLoadingIndicator() 才会执行。

该方法返回的新的 Promise 实例，一旦发生状态变更，状态总是 fulfilled，不会变成 rejected。状态变成 fulfilled 后，它的回调函数会接收到一个数组作为参数，该数组的每个成员对应前面数组的每个 Promise 对象。

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);

const allSettledPromise = Promise.allSettled([resolved, rejected]);

allSettledPromise.then(function (results) {
  console.log(results);
});

// [
//   { status: 'fulfilled', value: 42 },
//   { status: 'rejected', reason: -1 }
// ]

上面代码中，Promise.allSettled() 的返回值 allSettledPromise，状态只可能变成 fulfilled。它的回调函数接收到的参数是数组 results。该数组的每个成员都是一个对象，对应传入 Promise.allSettled() 的数组里面的两个 Promise 对象。

results 的每个成员是一个对象，对象的格式是固定的，对应异步操作的结果。

// 异步操作成功时
{status: 'fulfilled', value: value}

// 异步操作失败时
{status: 'rejected', reason: reason}

成员对象的 status 属性的值只可能是字符串 fulfilled 或字符串 rejected，用来区分异步操作是成功还是失败。

如果是成功（fulfilled），对象会有 value 属性，如果是失败（rejected），会有reason属性，对应两种状态时前面异步操作的返回值。

下面是返回值的用法例子：

const promises = [fetch('index.html'), fetch('https://does-not-exist/')];
const results = await Promise.allSettled(promises);

// 过滤出成功的请求
const successfulPromises = results.filter(p => p.status === 'fulfilled');

// 过滤出失败的请求，并输出原因
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

四、Promise 的应用

1、加载图片

我们可以将图片的加载写成一个 Promise，一旦加载完成，Promise 的状态就发生变化。

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

2、与 Generator 的结合使用

使用 Generator 函数管理流程，遇到异步操作的时候，通常返回一个 Promise 对象。

function getFoo() {
  return new Promise(function (resolve, reject) {
    resolve('foo');
  });
}

const g = function* () {
  try {
    const foo = yield getFoo();
    console.log(foo);
  } catch (e) {
    console.log(e);
  }
};

function run(generator) {
  const it = generator();

  function go(result) {
    if (result.done) return result.value;

    return result.value.then(function (value) {
      return go(it.next(value));
    }, function (error) {
      return go(it.throw(error));
    });
  }

  go(it.next());
}

run(g);

上面代码的 Generator 函数 g 之中，有一个异步操作 getFoo，它返回的就是一个 Promise 对象。函数 run 用来处理这个 Promise 对象，并调用下一个 next 方法。

五、Promise 的原理

1、实现一个 Promise

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  // 保存初始化状态
  var self = this;

  // 初始化状态
  this.state = PENDING;

  // 用于保存 resolve 或者 rejected 传入的值
  this.value = null;

  // 用于保存 resolve 的回调函数
  this.resolvedCallbacks = [];

  // 用于保存 reject 的回调函数
  this.rejectedCallbacks = [];

  // 状态转变为 resolved 方法
  function resolve(value) {
    // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变
    if (value instanceof MyPromise) {
      return value.then(resolve, reject);
    }

    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变，
      if (self.state === PENDING) {
        // 修改状态
        self.state = RESOLVED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.resolvedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

  // 状态转变为 rejected 方法
  function reject(value) {
    // 保证代码的执行顺序为本轮事件循环的末尾
    setTimeout(() => {
      // 只有状态为 pending 时才能转变
      if (self.state === PENDING) {
        // 修改状态
        self.state = REJECTED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.rejectedCallbacks.forEach(callback => {
          callback(value);
        });
      }
    }, 0);
  }

  // 将两个方法传入函数执行
  try {
    fn(resolve, reject);
  } catch (e) {
    // 遇到错误时，捕获错误，执行 reject 函数
    reject(e);
  }
}

MyPromise.prototype.then = function (onResolved, onRejected) {
  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
  onResolved =
    typeof onResolved === "function" ?
    onResolved :
    function (value) {
      return value;
    };

  onRejected =
    typeof onRejected === "function" ?
    onRejected :
    function (error) {
      throw error;
    };

  // 如果是等待状态，则将函数加入对应列表中
  if (this.state === PENDING) {
    this.resolvedCallbacks.push(onResolved);
    this.rejectedCallbacks.push(onRejected);
  }

  // 如果状态已经凝固，则直接执行对应状态的函数

  if (this.state === RESOLVED) {
    onResolved(this.value);
  }

  if (this.state === REJECTED) {
    onRejected(this.value);
  }
};

2、实现一个 Promise.then

then 方法返回一个新的 promise 实例，为了在 promise 状态发生变化时（resolve / reject 被调用时）再执行 then 里的函数，可以使用一个 callbacks 数组先把传给 then 的函数暂存起来，等状态改变时再调用。

那么，要怎么保证后一个 then 中的方法在前一个 then 结束之后再执行呢？

可以将传给 then 的函数和新 promise 的 resolve 一起 push 到前一个 promise 的 callbacks 数组中，达到承前启后的效果：

• 承前：当前一个 promise 完成后，调用其 resolve 变更状态，在这个 resolve 里会依次调用 callbacks 里的回调，这样就执行了 then 里的方法了;
• 启后：上一步中，当 then 里的方法执行完成后，返回一个结果，如果这个结果是个简单的值，就直接调用新 promise 的 resolve，让其状态变更，这又会依次调用新 promise 的 callbacks 数组里的方法，循环往复。如果返回的结果是个 promise，则需要等它完成之后再触发新 promise 的 resolve，所以可以在其结果的 then 里调用新 promise 的 resolve。

then(onFulfilled, onReject) {
  // 保存前一个 promise 的 this
  const self = this;
  return new MyPromise((resolve, reject) => {
    // 封装前一个 promise 成功时执行的函数
    let fulfilled = () => {
      try {
        const result = onFulfilled(self.value); // 承前
        return result instanceof MyPromise ? result.then(resolve, reject) : resolve(result); //启后
      } catch (err) {
        reject(err)
      }
    }
    // 封装前一个 promise 失败时执行的函数
    let rejected = () => {
      try {
        const result = onReject(self.reason);
        return result instanceof MyPromise ? result.then(resolve, reject) : reject(result);
      } catch (err) {
        reject(err)
      }
    }
    switch (self.status) {
      case PENDING:
        self.onFulfilledCallbacks.push(fulfilled);
        self.onRejectedCallbacks.push(rejected);
        break;
      case FULFILLED:
        fulfilled();
        break;
      case REJECT:
        rejected();
        break;
    }
  })
}

3、实现一个 Promise.all

核心思路：

1. 接收一个 Promise 实例的数组或具有 Iterator 接口的对象作为参数；
2. 这个方法返回一个新的 promise 对象；
3. 遍历传入的参数，用 Promise.resolve() 将参数包一层，使其变成一个 promise 对象；
4. 参数所有回调成功才是成功，返回值数组与参数顺序一致；
5. 参数数组其中一个失败，则触发失败状态，第一个触发失败的 Promise 错误信息作为 Promise.all 的错误信息。

实现代码：

一般来说，Promise.all 用来处理多个并发请求，也是为了页面数据构造的方便，将一个页面所用到的在不同接口的数据一起请求过来，不过，如果其中一个接口失败了，多个请求也就失败了，页面可能啥也出不来，这就看当前页面的耦合程度了。

function promiseAll(promises) {
  return new Promise(function (resolve, reject) {
    if (!Array.isArray(promises)) {
      throw new TypeError(`argument must be a array`)
    }
    var resolvedCounter = 0;
    var promiseNum = promises.length;
    var resolvedResult = [];
    for (let i = 0; i < promiseNum; i++) {
      Promise.resolve(promises[i]).then(value => {
        resolvedCounter++;
        resolvedResult[i] = value;
        if (resolvedCounter == promiseNum) {
          return resolve(resolvedResult)
        }
      }, error => {
        return reject(error)
      })
    }
  })
}

// test
let p1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve(1)
  }, 1000)
})
let p2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve(2)
  }, 2000)
})
let p3 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve(3)
  }, 3000)
})

promiseAll([p3, p1, p2]).then(res => {
  console.log(res) // [3, 1, 2]
})

4、实现一个 Promise.race

该方法的参数是 Promise 实例数组, 然后其 then 注册的回调方法是数组中的某一个 Promise 的状态变为 fulfilled 的时候就执行.因为 Promise 的状态只能改变一次, 那么只需把 Promise.race 中产生的 Promise 对象的 resolve 方法, 注入到数组中的每一个 Promise 实例中的回调函数中即可。

Promise.race = function (args) {
  return new Promise((resolve, reject) => {
    for (let i = 0, len = args.length; i < len; i++) {
      args[i].then(resolve, reject)
    }
  })
}