javascript - 如何在 XMLHttpRequest 中捕获 Chrome 错误 net::ERR_FILE_NOT_FOUND？

Question

我想创建能够读取本地文件并使用其中编写的代码的 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)
}

当我的文件路径正确时，此代码成功运行。但是当它不是 Chrome 控制台时会抛出这个错误:

GET file:///home/maxim/Documents/test.jsa net::ERR_FILE_NOT_FOUND

通常的 try/catch block 不起作用

async function () {
  try {
    const code = await readFile(jsFilePath)
    console.log(code)
  } catch (e) {
    console.log(e)
  }
}

如何捕获此类错误？

Answer 1

首先 net::ERR_FILE_NOT_FOUND 是一个浏览器错误(参见 Chromium/Chrome error list , Chrome fail error codes ，所以你不能用 JS 代码捕获它。

特别是 net::ERR_FILE_NOT_FOUND “不表示 fatal error 。通常此错误将作为通知生成”。

所以最好的方法是将 onloadend 处理程序附加到 XMLHttpRequest，在 Ajax 请求完成(成功或失败)时触发。

但是您无法检查状态，实际上是 status、statusText 和 readyState 属性的值 XMLHttpRequest 在文件存在的情况下和在文件未找到的情况下总是:

status: 0
statusText: ""
readyState: 4

反之，当文件未找到或在其他情况:

response: <file content>
responseText: <file content>
responseURL: "file:///..."

要检查的其他值是 event (ProgressEvent) loaded 属性，如果找不到文件(或在其他情况下加载的字节)，该属性的值为 0。

所以代码可以是:

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();
    });
}