js在for循环中执行异步操作,把每次异步的结果保存在数组中,如何在循环外面使用数组?

烟火里的尘埃丶 发布于 2018/03/26 16:05
阅读 2K+
收藏 0

类似于这种情况,如何保证最后一次循环执行之后,在循环外得到数组的值?

加载中
0
Simmy
Simmy

几个简单的思路

1、Promise.All


function asyncRandom() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, Math.floor(Math.random() * 100) + 1);
  });
}

let numbers = [];
function genNumber(count = 100) {
  const promises = [];
  const handleNumber = n => numbers.push(n);
  for (let i = 0; i < count; i++) {
    promises.push(asyncRandom().then(handleNumber));
  }
  return promises;
}


Promise.all(genNumber(20)).then(() => {
      console.log(numbers);
    });

2、async function(这种是一个一个处理的,每个promise处理完再处理下一个,相当于同步的方案,执行效率低)

function asyncRandom() {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, Math.floor(Math.random() * 100) + 1);
  });
}

async function getManyNumbers(count=100) {
  let result = [];//也可以定义在外部

  for (let i = 0; i < count; i++) {
    const ret = await asyncRandom();
    result.push(ret);
  }
  return result;
}

getManyNumbers().then(numbers => console.log(numbers));

// getManyNumbers().then(() => console.log(numbers)); // 定义在外部时

3、es7 generator

 

不过这种需求都可以转换为函数式编程解决,这也是最好的处理方式。

例如:一组url/任务,进行map/reduce,得到你要的结果。

 

烟火里的尘埃丶
烟火里的尘埃丶
谢谢你的回答,我试试你这种思路啊。我不是搞前端的,果然有好多不知道的,思路也很局限,还得多学习啊
0
雪梨苹果
雪梨苹果

因为是异步的,所以要设计回调函数;

又因为是多次的异步,所以要设计一个总回调。

通过异步回调去执行总回调,当然已异步回调的次数达到最大,就执行总回调。这样就没问题了。

当然,异步回调的次数要动态变化,根据异步成功或者失败,这样就不会因为某一个异步失败造成总回调出问题了。

0
烟火里的尘埃丶
烟火里的尘埃丶

我已经知道怎么解决了,如上图代码所示。可以保证循环结束时,在循环外面获得数组中保存的所有异步操作的结果。当然了,这并不一定是最好的方案,欢迎大家的讨论和斧正。

返回顶部
顶部