针对数组每个元素发起异步调用并等待全部完成的实现方案

嗨，我完全懂你的需求！你要做的就是让数组里每个元素都触发异步操作，然后等所有操作都完成后再返回结果对吧？这在JS里其实有很直接的解决方案，用Promise.all()就能轻松实现，我给你拆解一下：

核心思路 #

函数B的核心逻辑就是：

• 把数组中的每个元素都传给函数A，得到一组Promise对象
• 用Promise.all()把这组Promise包裹起来，它会返回一个新的Promise：
  • 当所有传入的Promise都成功resolve时，新Promise会带着所有操作结果组成的数组resolve
  • 如果其中任何一个Promise失败reject，新Promise会立刻reject对应的错误

代码示例（结合你的图片数组场景） #

首先先模拟你的函数A（比如是加载图片的异步操作）：

// 模拟你的函数A：接收图片URL，返回加载图片的Promise
function functionA(imgUrl) {
  return new Promise((resolve, reject) => {
    const imgElement = new Image();
    imgElement.onload = () => {
      console.log(`图片 ${imgUrl} 加载完成`);
      resolve(imgElement);
    };
    imgElement.onerror = (err) => {
      console.error(`图片 ${imgUrl} 加载失败`);
      reject(err);
    };
    imgElement.src = imgUrl;
  });
}

然后是你要开发的函数B：

// 函数B：接收元素数组，批量调用functionA并等待全部完成
function functionB(elementArray) {
  // 把数组每个元素映射为functionA返回的Promise
  const promiseList = elementArray.map(item => functionA(item));
  // 返回Promise.all包装后的Promise
  return Promise.all(promiseList);
}

接下来是调用示例（用你的图片数组）：

// 你的图片数组
var img = [];
img[0] = "http://www.something.com/picture0.jpg";
img[1] = "http://www.something.com/picture1.jpg";

// 调用函数B并处理结果
functionB(img)
  .then(allResults => {
    console.log("所有图片都加载完成啦！", allResults);
    // 这里可以对所有加载好的图片做后续操作
  })
  .catch(error => {
    console.error("有图片加载失败，终止操作：", error);
    // 处理失败情况
  });

额外补充：如果需要串行执行（逐个完成再执行下一个） #

上面的方案是并行执行（同时发起所有异步请求，效率更高），但如果你的场景需要逐个执行（比如怕请求频率太高被限制），可以用Array.reduce()实现串行版本的函数B：

// 串行版本的函数B：依次执行异步操作
function functionBSerial(elementArray) {
  return elementArray.reduce((prevTask, currentItem) => {
    return prevTask.then(results => {
      return functionA(currentItem).then(currentResult => {
        results.push(currentResult);
        return results;
      });
    });
  }, Promise.resolve([])); // 初始值是一个resolve的空数组Promise
}

这个版本会等前一个图片加载完成后，再开始加载下一张，适合有依赖或者需要控制并发数的场景。

内容的提问来源于stack exchange，提问作者Barnack