javascript 如何在 XMLHttpRequest 中捕获 Chrome 错误 net::ERR_FILE_NOT_FOUND？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48127436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to catch Chrome error net::ERR_FILE_NOT_FOUND in XMLHttpRequest?
提问by Maxim Topchu
I want to create chrome extension which will be able to read local files and use code wrote in them. My simplyfied code is:
我想创建能够读取本地文件并使用其中编写的代码的 chrome 扩展。我的简单代码是：
const readFile = (filePath) => {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.onerror = (error) => {
reject(error)
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
resolve(xhr.response)
}
}
xhr.ontimeout = function () {
reject('timeout')
}
xhr.open('GET', filePath)
xhr.send()
})
}
async function () {
const code = await readFile(jsFilePath)
console.log(code)
}
This code successfully works when my filePath is correct. But when it is not Chrome console throws this error:
当我的 filePath 正确时，此代码成功运行。但是当它不是 Chrome 控制台时会抛出这个错误：
GET file:///home/maxim/Documents/test.jsa net::ERR_FILE_NOT_FOUND
Usual try/catch block doesn't work
通常的 try/catch 块不起作用
async function () {
try {
const code = await readFile(jsFilePath)
console.log(code)
} catch (e) {
console.log(e)
}
}
How can I catch this type of errors?
我怎样才能捕捉到这种类型的错误？
回答by beaver
First of all net::ERR_FILE_NOT_FOUNDis a browser error (see Chromium/Chrome error list, Chrome fail error codes, so you cannot catch it with JS code.
首先net::ERR_FILE_NOT_FOUND是浏览器错误（参见Chromium/Chrome 错误列表，Chrome 失败错误代码，因此您无法用 JS 代码捕获它。
Specifically net::ERR_FILE_NOT_FOUND"does not indicate a fatal error. Typically this error will be generated as a notification".
特别是net::ERR_FILE_NOT_FOUND“不表示致命错误。通常此错误将作为通知生成”。
So the best approach is to attach onloadendhandler to XMLHttpRequest, triggered on Ajax request complete (either in success or failure).
所以最好的方法是将onloadend处理程序附加到XMLHttpRequest，在 Ajax 请求完成时触发（成功或失败）。
But you cannot check the status, in fact values of status, statusTextand readyStateproperties of XMLHttpRequestboth in the case of file existing and in the case of file not found are always:
但是您无法检查 status，实际上，在文件存在和未找到文件的情况下status，statusText和readyState属性的值XMLHttpRequest始终是：
status: 0
statusText: ""
readyState: 4
On the contrary you can check the properties response, responseTextand responseURLwhose value is "" when the file is not found or in other cases:
相反，您可以检查 properties response，当找不到文件或其他情况时responseText，responseURL其值为 ""：
response: <file content>
responseText: <file content>
responseURL: "file:///..."
Other value to check is event(ProgressEvent) loadedproperty which has value 0 in case of file not found (or the bytes loaded in other cases).
要检查的其他值是event(ProgressEvent)loaded属性，如果找不到文件（或其他情况下加载的字节），该属性的值为 0。
So the code could be:
所以代码可能是：
const readFile = (filePath) => {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest()
xhr.onloadend = (event) => {
console.log("xhr.onloadend", event, xhr.status, xhr.statusText, xhr.readyState, xhr);
if (event.loaded && xhr.response) {
resolve(xhr.response);
} else {
reject("error");
}
}
xhr.open('GET', filePath);
xhr.send();
});
}
