在Promisifying XMLHttpRequest时,如何捕获抛出错误

时间:2015-06-08 14:51:54

标签: javascript xmlhttprequest promise

在我宣传我的XMLHttpRequest之后,就像这样:

var Request = (function() {
var get = function(url){
    return request('GET', url);
  },
  post = function(url){
    return request('POST', url);
  },
  request = function(method, url) {
    return new Promise(function (resolve, reject) {
      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.onload = function(e){
        if (xhr.status === 200) {
          resolve(xhr);
        } else {
          reject(Error('XMLHttpRequest failed; error code:' + xhr.statusText));
        }
      },
      xhr.onerror = reject;
      xhr.send();
    });
  };

  return {
    get: get,
    post: post,
    request: request
  }
})();

我想捕获所有与网络相关的错误,这段代码已经完成了。现在,当我在XHR调用完成时链接.then调用时,我可以传递Ajax调用的结果。

以下是我的问题:

当我在任何Error分支中抛出.then时,它不会被catch子句捕获。

我怎样才能做到这一点?

请注意,throw new Error("throw error");不会在catch子句中被捕获....

有关整个代码,请参阅http://elgervanboxtel.nl/site/blog/xmlhttprequest-extended-with-promises

这是我的示例代码:

Request.get( window.location.href ) // make a request to the current page
.then(function (e) {

 return e.response.length;

})
.then(function (responseLength) {

  // log response length
  console.info(responseLength);

  // throw an error
  throw new Error("throw error");

})
.catch(function(e) { // e.target will have the original XHR object

  console.log(e.type, "readystate:", e.target.readyState, e);

});

1 个答案:

答案 0 :(得分:2)

问题是,在调用then块之前会抛出错误。

解决方案

Request
  .get('http://google.com')
  .catch(function(error) {
    console.error('XHR ERROR:', error);
  })
  .then(function(responseLength) {
    // log response length
    console.info(responseLength);
    // throw an error
    throw new Error("throw error");
  })
  .catch(function(error) { 
    // e.target will have the original XHR object
    console.error('SOME OTHER ERROR', error);
  });

提示

为什么不使用fetch()