代码之家 › 专栏 › 技术社区 › Janilson

我可以用构造函数内第三方库的异步调用填充数组吗?[副本]

javascript

Janilson · 技术社区 · 7 年前

这个问题已经有了答案:

How to access the correct `this` inside a callback? 10个答案

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

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

我不想简单地对响应做一些事情,然后让它按我想保存这个数组的方式进行,这样我就可以根据用户做的事情来处理它,而不必稍后再打另一个电话来获取相同的数据。

有没有一种方法可以在构造函数内部完成这项工作,或者我必须在其他地方使用承诺来完成这项工作?

1 回复 | 直到 7 年前

Mark 7 年前

处理这种情况的一种方法是在类上有一个只设置内容的构造函数,以及一个不同的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))

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前