javascript - 如何在 JavaScript 中创建一个返回本地文本文件值的函数？

Question

我正在开发一个小项目，这是我读取本地文本文件的代码:

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
    return allText;
}

我很确定我只是把返回单放在了错误的地方。有谁知道我应该把它放在哪里或者可以整体上实现更好的功能？

Answer 1

不存在异步问题，代码的唯一问题是您在 onreadystatechange 回调函数的范围内声明了 allText

如果您在该函数之外声明此变量，它将正常工作

function readTextFile(file) {
    var rawFile = new XMLHttpRequest();
    var allText; // var declared in readTextFile scope
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if(rawFile.readyState === 4) {
            if(rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return allText; // here you can return the data filled in above
}

Note however, that synchronous XMLHttpRequest in the main thread is deprecated in most browsers - you should learn to embrace asynchronous code. The easiest (and most cross browser currently) method is with callbacks, e.g.

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, true); // make it asynchronous
    rawFile.onreadystatechange = function () {
        if(rawFile.readyState === 4) {
            if(rawFile.status === 200 || rawFile.status == 0) {
                callback(rawFile.responseText);
            }
        }
    }
    rawFile.send(null);
}

使用

readTextFile('someFile.txt', function(allText) {
    console.log(allText);
});

关于 CHROME 的说明

Chrome - 暂时没有特殊的命令行标志--allow-file-access-from-files - 无论如何都会失败，因为它会产生一个错误，指出“跨域请求仅对 http https ...等”协议(protocol)有效... file:///不是这样的协议(protocol)

但是，如果您使用 file:///打开文件，那么如何跨域读取 file:///？？？只有 Chrum 的开发者才能回答这个问题