前言：

本文对 promise.all 方法进行讲解，参考阮一峰老师的es6

需要了解 promise 基础的小伙伴可以看我的另一篇文章

`Promise 对象实现 Ajax`

通过 promise 对象实现 Ajax （如下），后面 promise.all 会使用到

下面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个获取数据的 HTTP 请求，并且返回一个 Promise对象。需要注意的是，在 getJSON内部，resolve函数和 reject 函数调用时，都带有参数。

获取数据接口： https://jsonplaceholder.typicode.com/users

 const getJSON = function(url) {const promise = new Promise(function(resolve, reject){const handler = function() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}};const client = new XMLHttpRequest();client.open("GET", url);client.onreadystatechange = handler;client.responseType = "text";client.setRequestHeader("Accept", "application/json");client.send();});return promise;};getJSON("https://jsonplaceholder.typicode.com/users").then(function(json) {console.log('Contents: ' + json);}, function(error) {console.error('出错了', error);})

请求结果

这个数据接口共有十条数据，全部请求成功

Promise.all

Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

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

上面代码中，Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用 Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

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

（1）只有 p1、p2、p3的状态都变成 fulfilled，p的状态才会变成 fulfilled，

此时p1、p2、p3的返回值组成一个数组，传递给 p的回调函数。

（2）只要 p1、p2、p3之中有一个被 rejected，p的状态就变成 rejected，

此时第一个被 reject的实例的返回值，会传递给 p的回调函数。

使用上面的 getJSON 完成 promise.all 的例子

  // 生成一个Promise对象的数组const promises = [1, 3, 5, 7, 9].map(function (id) {return getJSON('https://jsonplaceholder.typicode.com/users/' + id);});Promise.all(promises).then(function (posts) {console.log("ok")console.log('Contents: ' + posts);}).catch(function(reason){console.log('出错了',reason)});

上面代码中，promises是包含 5个 Promise 实例的数组，只有这 5 个实例的状态都变成fulfilled，或者其中有一个变为 rejected，才会调用 Promise.all 方法后面的回调函数。

请求成功例子

上面的代码正常运行，打印 ok 以及 id 为 1 3 5 7 9 的数据

请求失败例子

上面 5 个 Promise 实例的数组只要有一个变为 rejected ，就会调用 promise.all 的 catch

接口只有10个数据，我把一个 ID 改成 19 ，这个地址不存在自然就报错，调用promise.all 的 catch

另外一个例子

const databasePromise = connectDatabase();const booksPromise = databasePromise.then(findAllBooks);const userPromise = databasePromise.then(getCurrentUser);Promise.all([booksPromise,userPromise
])
.then(([books, user]) => pickTopRecommendations(books, user));

上面代码中，booksPromise和 userPromise是两个异步操作，只有等到它们的结果都返回了，

才会触发 pickTopRecommendations这个回调函数。

注意：

如果作为参数的 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: 报错了]

上面代码中，p1会 resolved，p2首先会 rejected，但是 p2有自己的 catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完 catch方法后，也会变成resolved，导致 Promise.all()方法参数里面的两个实例都会 resolved，因此会调用 then方法指定的回调函数，而不会调用 catch方法指定的回调函数。

如果 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: 报错了

文章如有错误，恳请大家提出问题，本人不胜感激。不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/125376557?spm=1001.2014.3001.5501

Promise.all 方法详解相关推荐

ES6 — Promise基础用法详解（resolve、reject、then、catch,all,）
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
JavaScript Promise返回值详解
JavaScript Promise返回值详解 Promise回顾 Promise回调函数返回非Promise值 Promise回调函数返回Promise对象 Promise回调函数中抛出错误总结 ...
小程序setdata优化_微信小程序 setData的使用方法详解
微信小程序 setData的使用方法详解微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...
python统计csv行数_对Python 多线程统计所有csv文件的行数方法详解
如下所示: #统计某文件夹下的所有csv文件的行数(多线程) import threading import csv import os class MyThreadLine(threading.Th ...
python修改文件内容_Python批量修改文本文件内容的方法详解
这篇文章主要介绍了Python批量修改文本文件内容的方法的相关资料,需要的朋友可以参考下 Python批量替换文件内容,支持嵌套文件夹 import os path="./" fo ...
python二维元组_python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
如何去读取一个没有表头的二维csv文件(如下图所示)? 并以元组的形式表现数据: ((1.0, 0.0, 3.0, 180.0), (2.0, 0.0, 2.0, 180.0), (3.0, 0.0, ...
Spring JdbcTemplate方法详解
2019独角兽企业重金招聘Python工程师标准>>> Spring JdbcTemplate方法详解标签: springhsqldbjava存储数据库相关sql 2012-07- ...
golang 解析php序列化,golang实现php里的serialize()和unserialize()序列和反序列方法详解...
Golang 实现 PHP里的 serialize() . unserialize() 安装 go get -u github.com/techleeone/gophp/serialize 用法 pa ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...

Promise.all 方法详解

前言：