Javascript 承诺中的错误处理

Question

我有一些 Javascript 代码用一些同步的后处理来做一些异步的东西，然后再做一些异步的东西（XHR -> 解析 XHR -> 基于第一个的新 XHR）。我没有完成错误处理：

/* API */
function getFile(name) {
    return $.ajax({
        url: name + ".json"
    }).then(function(data) {
        return data.id
    }, handleError)
}

function handleError(errorObj) {
    if (errorObj.status) {
        return errorObj.status
    } else {
        return errorObj
    }
}

function myApiCall() {
    return getFile(1)
        .then(getFile, handleError)
        .then(getFile, handleError)
        .then(getFile, handleError)
        .then(getFile, handleError);
}


/* caller */

function failFunction(status) {
    console.log("fail: ")
    console.log(status)
}

myApiCall().then(function(id) {
        console.log(id)
    }, failFunction)

1.json 看起来像这样

{
    "id": "2"
}

只引用下一个文件，其他的都是等价的。

直到这里一切都很好（即使我不确定这是否是进行错误处理的最佳方法）。如果所有文件都存在，则调用调用者的成功函数，否则调用错误函数。

但是当我的同步代码出现一些错误时，一切都会中断

function getFile(name) {
    return $.ajax({
        url: name + ".json"
    }).then(function(data) {
        throw new Error(42) //       <---------
    }, handleError)
}

现在我得到一个控制台输出

Error: 42

没有进一步处理，调用者不会被通知。

我尝试过类似的方法

function getFile(name) {
    return $.ajax({
        url: name + ".json"
    }).then(function(data) {
        throw new Error(42)
    }, handleError)
    .catch(handleError)
}

但这并没有使任何事情变得更好。最重要的是我得到一个TypeError: $.ajax(...).then(...).catch is not a function

在这种情况下如何正确解决错误处理？

Answer 1

致所有在使用 jQuery 时厌倦了 Promise 的人。 Promise 真的很酷； jQuery 承诺很烂。这里还有一些基于 Jaromandas 答案的示例代码，供任何可以使用的人使用。

/* API */
function getFileWithError(name) {
    return getFile(name, true)
}

function getFile(name, doThrow) {
  if (name == null) {
    console.log("handled null as return from chain before")
    name = 2
  }
  return wrapJquery(
    $.ajax({
      url: name + ".json?" + Math.random()
    })
  ).then(function(data) {
    if (data.id == 2) {
        return null
    }
    if (doThrow) {
        throw data.id
    }
    return data.id
  });
}

function wrapJquery(crossingFingersPromise) {
    return new Promise(function(resolve, reject) {
        crossingFingersPromise
        .then(function(data) {
          resolve(data);
        }, function(err) {
          reject(err);
        });
     })
}

function handleError(errorObj) {
    if (errorObj.status) {
        throw errorObj.status; // return in jquery!
    } else {
        throw errorObj;
    }
}

function myApiCall() {
    return getFile(1)
        .then(getFile)
        .then(getFileWithError)
        .then(getFile, function(error) {
            console.log("recovering from error")
            return getFile(error)
        })
        .then(getFile)
        .catch(handleError)
}
/* caller */
function failFunction(status) {
    console.log("fail: ");
    console.log(status);
}
myApiCall().then(function(id) {
    console.log(id);
})
.catch(failFunction);

Answer 2

因为你在每个阶段都在处理错误，而不是传播它们，所以你最终会遇到你遇到的问题

编辑：

上面的说法是错误的，我写的时候并没有意识到jquery promises是多么的糟糕——看看第一段代码（Promise/A+）和第二段代码（jQuery promise with finger crossed behind it back）之间的区别)

相反，您可以执行以下操作：

function getFile(name) {
  // wrap jquery "promise" in real Promise
  // you'll need a Promise polyfill for Internet Explorer to use this method
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: name + ".json?" + Math.random()
    }).then(function(data) {
      resolve(data.id);
    }, function(err) {
      reject(err);
    });
  });
}

function handleError(errorObj) {
  //console.log(errorObj)
  if (errorObj.status) {
    throw errorObj.status;
  } else {
    throw errorObj;
  }
}

function myApiCall() {
  return getFile(1)
  .then(getFile)
  .then(getFile)
  .then(getFile)
  .then(getFile)
  .catch(handleError);
}

function failFunction(status) {
  console.log("fail: ")
  console.log(status)
}

myApiCall().then(function(id) {
  console.log(id);
})
.catch(failFunction);

当使用 jQuery 时，它的承诺就像你在背后交叉手指做出的承诺

function getFile(name) {
    return $.ajax({
        url: name + ".json"
    }).then(function(data) {
        return data.id;
    });
}
function handleError(errorObj) {
    if (errorObj.status) {
        return errorObj.status; // return in jquery!
    } else {
        return errorObj;
    }
}
function myApiCall() {
    return getFile(1)
        .then(getFile)
        .then(getFile)
        .then(getFile)
        .then(getFile)
        .fail(handleError); // like jquery promises in general, use fail instead of the compliant catch
}
/* caller */
function failFunction(status) {
    console.log("fail: ");
    console.log(status);
}
myApiCall().then(function(id) {
    console.log(id);
})
.fail(failFunction);