如何捕捉 XMLHttpRequest 的 onload 方法中抛出的错误

Question

我是 throw 处理我的 XMLHttpRequest 对象的 onload 方法的异常。但是我无法使用try catch 块来catch 那个错误。

我的_fetch(url, callback) 函数中有以下代码：

const xhr = new XMLHttpRequest()

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    // if (xhr.status === 200) callback(xhr.response)

    // throw a 'custom' error if the server responds with 501
    if (xhr.status === 501) throw new Error('Answer not found') /
  }
}

// rest of the fn

然后，我正在使用_fetch 函数：

try {
  _fetch(endPoint, response => console.log(response))
} catch (error) { // error not caught
  console.log(error)
}

但是，错误并没有被捕获，而是抛出了一个错误——Uncaught Error: Answer not found

我尝试过的：

• try catchinging xhr 对象的 send() 方法在 _fetch
• try catching_fetch 中 xhr 对象的 open() 方法@
• 使用 xhr 对象的 onerror 方法 - 将不起作用，因为请求已成功完成

那么，我怎么能catch那个错误呢？

要试用完整代码，请查看this fiddle。

---

为什么需要throwonload方法中的错误？

我正在从某个 API 获取数据，由于某些限制，我无法使用 fetch。我改用XMLHttpRequest。如果我发送的查询无法回答，服务器会返回错误代码501 - Not Implemented。 因此，我需要挑选出那个错误代码，并执行一些功能。

显然，还有其他可能的方法可以实现我的最终目标，但我发现很难理解为什么这不起作用。我已经阅读了throw 和XMLHttprequest，但我可能对其中一个的工作原理存在误解。

Answer 1

您绝对可以使用 fetch 不仅让您自己更轻松，还可以处理错误。此代码下方的 JSFiddle 链接。

const url = `http://api.wolframalpha.com/v1/result?appid=H2R834-AUAJXG9KRV&i=%3F`
fetch(`https://cors-anywhere.herokuapp.com/${url}`)
.then(res => {
    console.log(res.status)
    if (res.status == 200) {
        return res.json()
    }
    else if (res.status == 501) {
        throw new Error("Answer not found")
    }
    else {
        throw new Error("Some other status code")
    }
})
.then(json => { 
    console.log(json) 
})
.catch(err => { 
    console.error(err)
})

https://jsfiddle.net/mparson8/ug1hoks8/9/

Answer 2

虽然您可以使用库让您的生活更轻松，但

XMLHttpRequest onXXXX 实际上是事件处理程序，onload 只是许多可能的事件之一。完整列表在这里：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Events

在这种情况下，您缺少错误处理程序：

xhr.onerror( ... )

另外，如果您可以使用现代浏览器，请使用 xhr.addEventListener('load'|'error'|..., ... ) 代替。这实际上允许多个处理程序，删除处理程序等。

---

关于您的示例代码：

function _fetch(url, callback)

const xhr = new XMLHttpRequest()

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    // if (xhr.status === 200) callback(xhr.response)

    // throw a 'custom' error if the server responds with 501
    if (xhr.status === 501) throw new Error('Answer not found')
    // This can never be caught because async functions break the stack.
    // Intuition: If you can't return it, you can't throw either.
  }
}

// rest of the fn

然后，我正在使用 _fetch 函数：

try {
  _fetch(endPoint, response => console.log(response))
} catch (error) { // error not caught
  console.log(error)
}

在这种情况下，您需要修改 fetch 的回调以使用两个参数，在 similar style to node.js 中

特别是：_fetch(endPoint, (err, resp) => ... )

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    // if (xhr.status === 200) callback(null, xhr.response)

    // throw a 'custom' error if the server responds with 501
    if (xhr.status === 501) callback(new Error('Answer not found'), null);
  }
}

当然，聪明的方法是使用 Promise（或库）。确保至少调用一次 resolve 或 reject。

function _fetch(endpoint, callback) {
   return new Promise( (resolve, reject) => {
      xhr.onload = function () {
        if (xhr.readyState === xhr.DONE) {
        // if (xhr.status === 200) resolve(xhr.response)

        // throw a 'custom' error if the server responds with 501
        if (xhr.status === 501) reject(new Error('Answer not found'));
        }
      }

   });
}

这允许您按如下方式使用它：

_fetch(endpoint)
.then ( res => console.log('result', res) )
.catch( e => console.log('error', e);