如何创建 returns 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;
}

我很确定我只是把 return 放错了地方。有谁知道我应该把它放在哪里或者可以做一个更好的整体功能？

Answer 1

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

您可以使用回调或 Promise、.then() 到 readTextFile 到 return .responseText 作为已实现的 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)
});

Answer 2

不存在异步问题，您的代码的唯一问题是您在 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 -无论如何都会失败，因为它会产生一个错误，指出 "cross domain requests are only valid for http https ... etc" protocols ... file:/// isn't such a protocol

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

如何创建 returns JavaScript 中本地文本文件值的函数？

How do I make a function that returns the value of a local text file in JavaScript?

javascript

text

file

local

关于CHROME