XMLHttpRequest Typescript 与"this"冲突

Question

我在使用XMLHttpRequest和打字稿时遇到问题，这里有一个打字稿类：

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"将引用打字稿类Myclass 使用 JavaScript 函数 'this' 将引用请求，我将无法调用我的类方法 render((。

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

Answer 1

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

如果您更喜欢更简洁的方式，可以将请求绑定到回调函数 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