XMLHttpRequest onload() 函数未传递 XMLHttpRequest 对象 [重复]答案

【问题标题】：XMLHttpRequest onload() function isn't passing a XMLHttpRequest object [duplicate]XMLHttpRequest onload() 函数未传递 XMLHttpRequest 对象 [重复]
【发布时间】：2019-08-13 21:28:37
【问题描述】：

我有一个函数向我的服务器发送一个简单的 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) 似乎是某个“窗口”对象，而不是 XMLHttpRequest 对象。因此，没有 status 或 responseText 变量。

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

【问题讨论】：

标签： javascript ajax express http xmlhttprequest

【解决方案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：

箭头函数没有自己的 this。的这个值使用封闭词法范围；箭头功能遵循正常变量查找规则。所以在搜索这个不是存在于当前范围内，箭头函数最终会找到 this 从它的封闭范围。

【讨论】：