JavaScript从服务器读取文件无法返回内容的问题排查与解决

问题原因 #

• 异步请求特性：你开启了XMLHttpRequest的异步模式（第三个参数为true），函数red会在网络请求完成前就执行结束，直接返回undefined，所以alert弹出的是undefined，根本等不到请求结果。
• 回调返回值无效：onload回调里的return只是该回调函数的返回值，不会传递给外层的red函数，而red本身没有任何返回语句，自然拿不到文件内容。
• 请求方法错误：读取静态文件应该使用GET方法，POST通常用于提交数据，用它读取文件可能不符合服务器的请求规范，甚至被拒绝。

修复方案 #

方案1：使用回调函数（传统异步处理方式） #

把结果处理逻辑放到回调函数中，异步请求完成后触发回调：

function red(filename, callback) {
    let xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        // 请求成功时把结果传给回调
        callback(this.responseText);
    };
    xhttp.onerror = function() {
        // 处理请求失败场景
        callback(null, new Error("请求失败"));
    };
    xhttp.open("GET", filename, true);
    xhttp.send();
}

// 调用时传入回调处理结果
red("file.txt", function(result, error) {
    if (error) {
        alert("出错了：" + error.message);
        return;
    }
    alert(result);
});

方案2：使用Promise（现代异步处理方式） #

用Promise封装请求，支持链式调用，代码逻辑更清晰：

function red(filename) {
    return new Promise((resolve, reject) => {
        let xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            if (this.status >= 200 && this.status < 300) {
                resolve(this.responseText);
            } else {
                reject(new Error(`请求失败，状态码：${this.status}`));
            }
        };
        xhttp.onerror = function() {
            reject(new Error("网络请求失败"));
        };
        xhttp.open("GET", filename, true);
        xhttp.send();
    });
}

// 调用方式
red("file.txt")
    .then(result => alert(result))
    .catch(error => alert("出错了：" + error.message));

方案3：使用async/await（语法糖，基于Promise） #

如果环境支持ES2017+，可以用async/await让异步代码看起来像同步：

function red(filename) {
    return new Promise((resolve, reject) => {
        let xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            if (this.status >= 200 && this.status < 300) {
                resolve(this.responseText);
            } else {
                reject(new Error(`请求失败，状态码：${this.status}`));
            }
        };
        xhttp.onerror = function() {
            reject(new Error("网络请求失败"));
        };
        xhttp.open("GET", filename, true);
        xhttp.send();
    });
}

// 必须在async函数内使用await
async function loadFile() {
    try {
        const result = await red("file.txt");
        alert(result);
    } catch (error) {
        alert("出错了：" + error.message);
    }
}

loadFile();

额外注意事项 #

• 确保file.txt与当前页面同域，否则会触发跨域限制，需要服务器配置CORS规则。
• 检查服务器是否允许GET请求访问该静态文件，部分服务器会对静态资源的请求方法做限制。

内容的提问来源于stack exchange，提问作者Bahram