Question

我有一个向我的服务器发送简单AJAX请求的功能。浏览器的javascript代码如下所示：

function testRequest() {

    var xhr = new XMLHttpRequest();
    xhr.onload = () => {

        console.log("RESPONSE RECIEVED");
        console.log(this); // 'this' should be a XMLHttpRequest object
        console.log(this.status);
        console.log(this.responseText);
    };

    xhr.open('POST', `http://server_ip/test`, true);
    xhr.send();
}

服务器代码如下（Express.js）：

app.post("/test", (req, res) => { 

    res.setHeader("Access-Control-Allow-Origin", "*");
    res.status(200).send("testing");
});

调用该函数时，我在浏览器控制台上得到的响应是：

RESPONSE RECIEVED
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

undefined

而不是预期的：

RESPONSE RECIEVED
XMLHttpRequest {…}
200
"testing"

换句话说，浏览器正在接收服务器响应，但是传递给onload函数（this）的对象似乎是一些“ Window”对象，而不是XMLHttpRequest对象。结果，没有status或responseText变量。

在浏览器中检查请求时，响应的主体确实符合预期的“测试”。

Answer 1

这是因为您使用的是箭头功能() =>，在这些功能中this是按词法捕获的，不会随上下文而变化。在您的情况下，this指向window上下文，因为这是封闭的词汇范围，即声明它的位置。

您需要将其更改为普通的function，以使this指向xhr对象：

xhr.onload = function(){
      console.log("RESPONSE RECIEVED");
      console.log(this); // 'this' should be a XMLHttpRequest object
      console.log(this.status);
      console.log(this.responseText);
};

从MDN docs：

箭头函数本身没有此函数。这个值使用封闭的词汇范围；箭头功能遵循正常可变查找规则。所以在寻找这个不是当前范围内的箭头功能最终会找到从其封闭范围。

XMLHttpRequest onload（）函数未传递XMLHttpRequest对象

1 个答案: