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

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 5 年前。

我有一个带有数组属性的对象，我想用从异步调用收到的响应来填充该属性。此调用是通过接收回调函数的第三方库中的方法进行的，因此我尝试了如下操作:

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 属性”。

我不想简单地对响应做一些事情，然后让它过去，因为我想存储这个数组，这样我就可以根据用户的行为来处理它，而不必稍后再进行一次调用获取相同的数据。

有没有办法在构造函数内执行此操作，或者我是否必须在其他地方使用 Promise 来执行此操作？

Answer 1

处理这个问题的一种方法是在你的类上有一个构造函数，它只进行设置，还有一个不同的 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))