以最简单的方式处理自定义错误，获取& ES6承诺 [英] Cleanest way to handle custom errors with fetch & ES6 promise

问题描述

我正在尝试通过获取和处理智能处理API的成功/错误响应。 ES6承诺。

这是我需要如何处理响应状态：

  204：没有json响应，但需要对待成功
 406：应该重定向到登录
 422：有json的错误消息
< 400（但不是204）：成功，将有json 
> = 400（但不是422）：错误，不会有json 
  

所以，我很努力地写这个干净的。

我有一些比恒星代码正常工作，看起来像这样：

  fetch（）
 .then（response => checkStatus（response））
 。（（parseJSON）//将抛出204 
 .then（data => notify（'success'，someMsg））
 .catch（error => checkErrorStatus（error））
 .then（parseJSON）
 .then（data => notify（'error'，dataForMsg）
 .catch（error => notify（'error'，someGenericErrorMsg）
  

但是，两次使用catch似乎很奇怪，我不知道如何处理这个204。 p>

另外，只是为了澄清 checkStatus 和 checkErrorStatus 做一个类似的东西：

  export function checkStatus （response）{
 if（response.status> = 200&&& response.status< 300）{
 return response 
} else {
 let error = new Error（response.statusText）
 error.response = response 
 throw error 
} 
} 
 
函数checkErrorStatus（错误）{
 if（error.response.status === 422）{
 return error.response 
} else {
 let error = new Error（response.statusText）
 error.response = response 
 throw error 
} 
} 
  

任何建议清理？

解决方案

我想你可以很容易地写出来：

  fetch（...）.then（response => {
 if（response.ok）
 return response [response.status == 204？text：json]（）; 
 if（response.status == 422）
 return response.json（）然后（err => {throw err;}）; 
 if（response.status == 406）
 var error = new AuthentificationError（response.statusText）; //或无论$ b $是什么lse 
 var error = new Error（response.statusText）
 error.response = response 
 throw error; 
}）
  

I am trying to intelligently handle the success/error responses from our API using fetch & ES6 promises.

Here is how I need to handle response statuses:

204: has no json response, but need to treat as success
406: should redirect to sign in
422: has json for error message
< 400 (but not 204): success, will have json
>= 400 (but not 422): error, will not have json

So, I am struggling with how to write this cleanly.

I have some less than stellar code working right now that looks like this:

fetch()
  .then(response => checkStatus(response))
  .then(parseJSON)                           //will throw for the 204
  .then(data => notify('success', someMsg))
  .catch(error => checkErrorStatus(error))
  .then(parseJSON)
  .then(data => notify('error', dataForMsg)
  .catch(error => notify('error', someGenericErrorMsg)

But it seems pretty weird to use catch twice and I don't know how to deal with that 204 just yet.

Also, just to clarify checkStatus and checkErrorStatus do a similar thing:

export function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    let error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function checkErrorStatus(error) {
  if(error.response.status === 422) {
    return error.response
  } else {
    let error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

Any suggestions for cleaning this up?

解决方案

I think you can write it out pretty easily:

fetch(…).then(response => {
    if (response.ok)
        return response[response.status == 204 ? "text" : "json"]();
    if (response.status == 422)
        return response.json().then(err => { throw err; });
    if (response.status == 406)
        var error = new AuthentificationError(response.statusText); // or whatever
    else
        var error = new Error(response.statusText)
    error.response = response
    throw error;
})

这篇关于以最简单的方式处理自定义错误，获取& ES6承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！