XMLHttpRequest的readystatechange事件失效问题求助

问题和Chrome浏览器无关，是你代码里的逻辑错误：你把request.open()和request.send()放进了readystatechange的事件回调函数内部。

这个回调只有在XMLHttpRequest的状态发生变化时才会执行，但你还没调用open和send，请求根本没启动，状态不会有任何变化，回调自然不会触发，请求永远发不出去。换成document的click事件后，点击文档时会执行回调里的open和send，请求才正常发起，所以功能能运行。

修正后的代码应该把open和send移到事件监听外面，先绑定事件，再发起请求：

const getData = (source) => {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.addEventListener('readystatechange', () => {
            if (request.readyState === 4 && request.status === 200) {
                let todos = JSON.parse(request.responseText);
                resolve(todos);
            } else if (request.readyState === 4) {
                reject('An error occured!');
            }
        });
        // 将请求发起代码移到事件监听外部
        request.open('GET', source);
        request.send();
    });
};

getData('https://jsonplaceholder.typicode.com/todos')
    .then((data) => console.log(data))
    .catch((err) => console.log(err));

另外，你也可以用load事件替代readystatechange，它只会在请求成功完成时触发，逻辑更简洁，还可以搭配error事件处理网络层面的错误：

const getData = (source) => {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.addEventListener('load', () => {
            if (request.status === 200) {
                let todos = JSON.parse(request.responseText);
                resolve(todos);
            } else {
                reject('An error occured!');
            }
        });
        request.addEventListener('error', () => {
            reject('Network error occurred!');
        });
        request.open('GET', source);
        request.send();
    });
};

内容的提问来源于stack exchange，提问作者mr.sun