JavaScript 在函数 'class' 包装器之间进行 promise

Question

我对 promise 不熟悉，想解决以下场景:

考虑一个主“类”函数 Main() ，它表示一个 Three.js-Scene 和一个“子类”函数 Sub() ，它表示数据渲染:

• Main() 有一个调用 new 的方法 addSubDataToObject() Sub() 转换为 Main().data 对象 ({id_x: data_from_url_x})
• Main() 有另一个方法 renderDataObjects() 来渲染数据 (通过 Three.js addToScene())
• Sub() 在调用时通过方法 getData() 检索远程数据 (使用 XMLHttpRequest 调用 WebWorker)并将其处理为对象返回 ({id: data_from_url})

调用后

var main = new Main();

我希望能够添加多个数据对象

main.addSubDataToObject(id_1, url_1);
main.addSubDataToObject(id_2, url_2);

并调用

main.renderDataObject();

当所有数据调用完成下载和处理后，将 main.data 中的每个对象渲染到场景。

目前，我使用回调在每个数据调用完成后将每个数据调用添加到场景

main.addSubDataToObject(id_1, url_1, cb);
main.addSubDataToObject(id_1, url_2, cb);

但这当然会随后添加它们，并根据有效负载进行延迟。

例如，我想使 Main() 的 .addSubDataToObject() 将每个 Promise 返回到 Promise 数组和 .renderDataObject 中() 和 Promise.all() 等待在渲染之前解决所有问题。
但是，我不知道如何与数据对象结合实现它以及如何使用 promise 处理“类”对象。如果可能的话(这对您来说似乎很实用)，我非常感谢这个场景的示例结构。

Answer 1

如果我理解这个问题，您只是想知道如何在类函数内部使用 Promises 吗？这是您要找的吗？

class Main {
  renderDataObject(data) {
    /* data will be an array of all resolvedData in the order they were resolved */
  }

  addSubDataToObject(id, url) {
    return new Promise(function(resolve, reject) {
      // do work

      resolve(/* resolvedData? */);
    });
  }
}

let main = new Main();
let promises = [];

promises.push(main.addSubDataToObject(id_1, url_1));
promises.push(main.addSubDataToObject(id_2, url_2));

Promise.all(promises).then(main.renderDataObject);