核心的な問題はこれだ

この処理は特別なものでなければならない。JavaScriptエンジンはこれをエラーとみなしません単にJSONとして解析でき、「errors」というキーを含むHTTPペイロードを受信するだけです。（そうすべきでもありません。）このペイロードパターンは、HTTPエンドポイントの一部またはすべてで使用されるカスタム規則にすぎません。あなたに話す。

悪いアイデアだと言っているわけではありません。（素晴らしいアイデアだと思います！）しかし、それはなぜこれはカスタムで行う必要があります。このパターンは単なるあなたの個人的な小さなものであり、実際にはブラウザがそれを望む特別な方法で処理するような特別なものではないためです。

これが私たちの計画です:

1. リクエストを作成し、ツールによってスローされたものを捕捉するためにtry/catchを使用します
   • 悪いと思われる応答を受け取った場合:
     1. ペイロードを調べて「標準形式」でエンコードされたエラーを探します。私はこのようなエラーを「API エラー」と呼んでいます。
     2. APIエラーが見つかった場合、私たちは自分たちで創造し、投げますErrorAPIエラーの内容をメッセージとして使用します
     3. APIエラーが見つからない場合は、レスポンスの本文をそのままエラーメッセージとして扱います。
   • 良いと思われる回答が得られた場合:
     1. 良いニュース（および役立つデータ）を店舗に送信する

コードで表すと次のようになります。

export const addEmployee = ({
  firstName,
  surname,
  contactNumber,
  email
}) => async ( dispatch, getState ) => {
  const payloadBody = {
    firstName,
    surname,
    contactNumber,
    email
  }
  
  try {
    // step 1
    let response = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payloadBody)
    })
    
    let responseText = await response.text()
    if (!response.ok) {
      // step 2
      let errorString = getErrorMessageFromResponseBody(responseText)
      throw new Error(errorString) // API errors get thrown here
    }
    
    // step 3
    let responseJson = JSON.parse(responseText)
    
    dispatch(setAlert('New Employee added', responseJson.user.name))
    
    /*
      A redux action should always returns something useful.
      addEmployee might return the `user` object that was created.
    */
    return responseJson.user
    
  } catch ( error ) {
    // all errors land here
    dispatch({
      type: REGISTER_FAIL,
      message: error.message
    })
    /*
      A failed redux action should always return something useful (unless you prefer to throw).
      For now, we'll return the reason for the failure.
    */
    return error.message
  }
}


function getErrorMessageFromResponseBody( string ) {
  let errorString = string
  
  try {
    let json = JSON.parse(string)
    if(json.errors) {
      errorString = json.errors[0].msg
    }
  } catch ( parseOrAccessError ) {}
  
  return errorString
}

class APIError extends Error {}

APIError.fromResponseText = function ( responseText ) {
  // TODO: paste entire impl of getErrorMessageFromResponseBody
  let message = getErrorMessageFromResponseBody(responseText)
  return new APIError(message)
}

// throwing
if (!response.ok) {
  // step 2
  throw APIError.fromResponseText(responseText)
}

// detecting
catch ( exception ) {
  if(exception instanceof APIError) {
    switch(APIError.message) {
      case 'User already exist with email':
        // special logic
        break
      case 'etc':
        // ...
    }
  }
}

function add( x, y ) {
  if(typeof x !== 'number')
    throw new Error(x + ' is not a number')
  
  if(typeof y !== 'number')
    throw new Error(y + ' is not a number')
  
  return x + y
}

add('a', 1)
//> 'a is not a number'

add({ species: 'dog', name: 'Fido' }, 1) 
//> '[object Object] is not a number'

[objection] [topic]

'missing lastName'
'unknown userId'
'unavailable player_color'
'forbidden emailAddress'
'invalid x'

[operation] failed

try {
  await API.updateUserProfile(newData)
  
} catch( error ) {
  // can fail if service is down
  if(error instanceof TypeError)
    throw new Error('API.updateUserProfile failed')
}

function getErrorMessageFromResponseBody( string ) {
  let errorString = string
  
  /*
    "Format A"
    { errors: [{ msg: 'MESSAGE' }] }
    used by most endpoints
  */
  try { /*... */ } catch ( parseOrAccessError ) {}
  
  /*
    "Format B"
    { error: { message: 'MESSAGE' } }
    used by legacy TPS endpoint
  */
  try { /*... */ } catch ( parseOrAccessError ) {}
  
  /*
    "Format C"
    { e: CODE }
    used by bandwidth-limited vendor X
    use lookup table to convert CODE to a readable string
  */
  try { /*... */ } catch ( parseOrAccessError ) {}
  
  return errorString
}