Question

我使用XMLHttpRequest和typescript有一个问题，这是一个typescript类：

class Myclass {
 constructor() {
   this.init();
 }

 private init() {
  const req = new XMLHttpRequest();
  req.onreadystatechange = ( event: Event ): any => {
   if (this.readyState === XMLHttpRequest.DONE) {
    if (this.status === 200) {
      this.render(this.responseText)
    }
   }
  };

  req.open('GET', '/api/test', true);
  req.send(null);
 };

private render( data:any ) {
  console.log(`use ${data}`)
 }
}

在这种情况下，“this”将引用typescript类Myclass 并使用javascript函数'this'将引用请求，我将无法调用我的类方法render（）。

如何调用我的render（）方法并仍然可以访问响应？

Answer 1

您已经可以使用XMLHttpRequest变量访问req。

如果您更喜欢更简洁的方式，可以将请求绑定到回调函数lite，这样：

req.onreadystatechange = (function ( request: XMLHttpRequest, event: Event ): any {
    if (request.readyState === XMLHttpRequest.DONE) {
        if (request.status === 200) {
            this.render(request.responseText)
        }
    }
}).bind(this, req);

或使用相反的方式：

req.onreadystatechange = (function ( myClassObject: MyClass, event: Event ): any {
    if (this.readyState === XMLHttpRequest.DONE) {
        if (this.status === 200) {
            myClassObject.render(this.responseText)
        }
    }
}).bind(req, this);

使用bind函数，您可以为函数以及部分或全部参数分配固定的this对象。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

XMLHttpRequest Typescript与'this'冲突

1 个答案: