关于CHROME的说明

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

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

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
}

但是请注意，在大多数浏览器中不推荐使用主线程中的同步XMLHttpRequest - 您应该学会使用异步代码。最简单的（当前最多的跨浏览器）方法是回调，例如

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 - 没有特殊的命令行标志 - 现在允许文件从文件访问 - 无论如何都会失败，因为它会产生错误，指出“跨域请求仅对http https ...等有效“协议...文件：///不是这样的协议

但是，如果您使用file：///打开文件，那么如何读取文件：///是跨域???只有Chrum的开发人员可以回答那个

Answer 2

注意，默认情况下，chrome，chrome不允许请求file:协议。您可以使用标记--allow-file-access-from-files启动chrome，chrome，以file:协议从本地文件系统请求文件。

您可以使用回调或Promise，.then()从.responseText返回readTextFile作为已完成的Promise对象的值。

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

readTextFile("file://path/to/file.txt")
.then(function(text) {
  // `text` : `rawFile.responseText`
  console.log(text);
  alert(allText);
})
// handle error
.catch(function(err) {
  console.log(err)
});

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

2 个答案:

关于CHROME的说明