promise.all的实际应用

 

promise.all的基础定义

Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例， 那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values);
});

工作中的实际场景

当你进入一个页面，需要等到所有的请求都加载完再刷新页面 或者 需要多个接口都将数据提交完毕才进行其它操作，就可以使用到这个

我的使用：需要一步提交数组中的每一条数据，同一个接口调用多次

 1 Promise.all(list.map((item, index) => {
 2       let appkey = null;
 3       this.state.productList.map(item1 => { 
 4         if (item1.value == item.product) {
 5           appkey = item1.key
 6         }
 7       })
 8       return this.preservation(item.id, item.promote_name, item.product, item.use_way + '', appkey, item.position_id, item.ids.join(), item.idea_display, item.weight)
 9     })).then((result) => {
10       let is = true12       result.map((item, index) => {
13         list[index].id = item.data.id
14         if (item.error_no != 0) {
15           is = false
16           message.error('第' + (index + 1) + '条推广' + item.error_msg)
17         }
18       })
19       if (is == true) {
20         message.success(k == 'next' ? '已默认为您保存' : '保存成功')
21         this.setState({
22           panelList: list,
23           current: k == 'next' ? this.state.current + 1 : this.state.current
24         })
25       }
26     })

简化版：

let p1 = new Promise((resolve,reject) => {
   resolve('success1')
})
let p2 = new Promise((resolve,reject) => {
    resolve('success2')
 })
 let p3 = new Promise((resolve,reject) => {
    reject('error')
 })
Promise.all([p1,p2,p3]).then(res => 
     console.log(res)
 }).catch(err => {
console.log(err)
})

成功时：['success1','success2']
失败时：error
注意：实际场景中调用多个请求方法，一定要将res return出来，否则promise无法拿到返回结果