时间戳

首页 > 解决方案 > 我可以使用构造函数内部第 3 方库的异步调用填充数组吗？

javascript - 我可以使用构造函数内部第 3 方库的异步调用填充数组吗？

问题描述

我有一个带有数组属性的对象，我想用从异步调用收到的响应来填充它。此调用是由接收回调函数的第 3 方库中的方法进行的，所以我尝试了这样的方法：

class Foo {
    constructor() {
        this.myArray = [];

        thirdPartyObject.thirdPartyMethod(
            param1,
            param2,
            function(data){ //success callback
                data.forEach(item => {
                    var myArrayEle = {
                        propertyA : item.propertyA,
                        propertyB : item.propertyB
                    };
                    this.myArray.push(myArrayEle);
                })
            },
            function(data){ //error callback
                throw "Error"
            }
        )
    }
}

this.SomeArray.push(myArrayEle);我在说“无法读取未定义的 myArray 属性”时收到错误消息。

我不想简单地对响应做一些事情然后放手，因为我想保存这个数组，这样我就可以根据用户所做的事情来做一些事情，而不必稍后再打电话来获得相同的结果数据。

有没有办法在构造函数中做到这一点，或者我必须在其他地方使用承诺来做到这一点？

标签： javascript

解决方案

处理这个问题的一种方法是在你的类上有一个构造函数，它只是设置东西和一个不同的 init 函数，它可以处理异步获取数据并让你知道对象何时正确初始化。这是我们模拟您的thirdPartyMethod. 当你调用构造函数时，数组将是未定义的，但你可以调用init().then()它来知道它什么时候准备好：

const thirdPartyObject = {
  thirdPartyMethod(param1, param2, success, error) {
    setTimeout(() => success([{propertyA: "propA0",propertyB: "propB0"}, {propertyA: "propA1",propertyB: "propB1"
    }]), 1000)
  }
}

class Foo {
  constructor(data) {
    console.log("making instance")
    this.myArray = data;
  }
  init() {
    console.log("starting init")
    return new Promise((resolve, reject) => {
      thirdPartyObject.thirdPartyMethod(
        'param1','param2',
        (data) => { //success callback    // use arrow function so 'this' works 
          this.myArray = data.map(item => {
            return {
              propertyA: item.propertyA,
              propertyB: item.propertyB
            };
          })
          console.log("finished init, data ready")
          resolve(true)
        },
        function(data) { //error callback
          reject("Error")
        }
      )
    })
  }
}

let f = new Foo()
f.init()
  .then(() => console.log(f.myArray))
  .catch(err => console.log(err))

推荐阅读