此需求在于二次循环中需要使用async/await,按照每次嵌套循环的时候,进行async,则会给出错误的输出,如下所示
let list = [
{
name: "a",
age: 1
},
{
name: "b",
age: 2
}, {
name: "c",
age: 3
}
];
let list2 = [
{
name: "a1",
age: 1
},
{
name: "b1",
age: 2
}, {
name: "c1",
age: 3
}
];
function test() {
list.forEach(async item => {
let arr = [];
await list2.forEach(async item => {
let info2 = await asyncItem2(item);
console.log("info2", info2)
arr.push(info2)
})
console.log("--------arr", arr)
let info = await asyncItem(item);
console.log("test", info)
})
}
async function asyncItem(item) {
item.index = item.age;
console.log("asyncItem", item.age)
return Promise.resolve(item);
}
async function asyncItem2(item) {
item.index = item.age;
console.log("asyncItem2", item.age)
return Promise.resolve(item);
}
//执行函数
test()
//以上,你将得到如下输出
asyncItem2 1
asyncItem2 2
asyncItem2 3
asyncItem2 1
asyncItem2 2
asyncItem2 3
asyncItem2 1
asyncItem2 2
asyncItem2 3
--------arr []
asyncItem { name: 'a', age: 1 }
--------arr []
asyncItem { name: 'b', age: 2 }
--------arr []
asyncItem { name: 'c', age: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
test { name: 'a', age: 1 }
test { name: 'b', age: 2 }
test { name: 'c', age: 3 }
上述的67、69、71行很明显不是我们想要的输出,我们想要的是输出一个新的数组
解决方案:
1.利用Promise.all
可以将二次循环中的async封装成promise函数,同时利用Promise.all进行统一执行;
let list = [
{
name: "a",
age: 1
},
{
name: "b",
age: 2
}, {
name: "c",
age: 3
}
];
let list2 = [
{
name: "a1",
age: 1
},
{
name: "b1",
age: 2
}, {
name: "c1",
age: 3
}
];
function test(){
list.forEach(async item=>{
let arr = await promiseAllList();
console.log("---arr",arr)
let info = await asyncItem(arr);
console.log("test",info)
})
}
async function promiseAllList() {
let arr = [];
list2.forEach(item => {
let info2 = promiseItem(item);
arr.push(info2)
})
console.log("-----promiseAllList", arr)
let result = await Promise.all(arr);
console.log("result", result)
return result;
}
async function promiseItem(item) {
let info2 = await asyncItem2(item);
console.log("info2", info2)
return Promise.resolve(info2);
}
async function asyncItem(item) {
console.log("asyncItem", item)
return Promise.resolve(item);
}
async function asyncItem2(item) {
item.index = item.age;
console.log("asyncItem2", item.age)
return Promise.resolve(item);
}
//执行函数
test()
//函数输出如下
asyncItem2 1
asyncItem2 2
asyncItem2 3
-----promiseAllList [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
asyncItem2 1
asyncItem2 2
asyncItem2 3
-----promiseAllList [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
asyncItem2 1
asyncItem2 2
asyncItem2 3
-----promiseAllList [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
info2 { name: 'a1', age: 1, index: 1 }
info2 { name: 'b1', age: 2, index: 2 }
info2 { name: 'c1', age: 3, index: 3 }
result [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
result [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
result [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
---arr [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
asyncItem [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
---arr [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
asyncItem [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
---arr [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
asyncItem [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
test [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
test [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
test [
{ name: 'a1', age: 1, index: 1 },
{ name: 'b1', age: 2, index: 2 },
{ name: 'c1', age: 3, index: 3 }
]
2.for循环中调用async/await
function getData(n){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(n+1)//原来的数据上+1
},1000)
})
}
let data = [0,1,2,3,4];
async function subData(){//提交数据保存
for(let i = 0;i<data.length;i++){
const res = await getData(data[i])
console.log(res)
} //改变数据
console.log('sub')//提交数据
}
subData()
// 1
// 2
// 3
// 4
// 5
// subData: 5.009s
// sub
3.递归函数
function getData(n){//通过该接口改变数据
// console.log('n',n)
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(n+1)//原来的数据上+1
},1000)
})
}
let data = [0,1,2,3,4]
async function digui(index,arr){
if(index<data.length){
let res = await getData(data[index])
console.log(res)
arr.push(res)
await digui(index+1,arr)
}
return arr
}
async function subData1(){
const newList = await digui(0,[])
// console.log(newList)
console.timeEnd("subData1")
console.log('sub')
}
subData1()
console.time("subData1")
//1
// 2
// 3
// 4
// 5
// subData1: 5.010s
// sub
4.Promise.map
这个方法将使用一些插件依赖
bluebird
https://www.npmjs.com/package/bluebird
例子
function getData(n){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(n+1)//原来的数据上+1
},1000)
})
}
let data = [0,1,2,3,4];
async function subData2(){
await Bluebird.map(data,async item => {
let res = await getData(item);
console.log(res)
return null;
}, {concurrency: 10})
console.timeEnd("subData1")
console.log('sub')
}
subData2()
console.time("subData1")
// 1
// 2
// 3
// 4
// 5
// subData1: 1.016s
// sub
