■目次

ステータスコードの復習

引用：3. ステータスコード【レスポンス】

ステータスコードの大分類

https://www.youtube.com/watch?v=e8kIOXsivOg&list=PLX8Rsrpnn3IVsi0NIDP3yRlFCS0uOZdqv&index=8

• 先頭の数字でどのようなレスポンスかを把握できる
• 未知のステータスコードは先頭の数字で対応しよう

よく使うステータスコード【成功系】

https://www.youtube.com/watch?v=e8kIOXsivOg&list=PLX8Rsrpnn3IVsi0NIDP3yRlFCS0uOZdqv&index=8

• 204 No Content：OPTIONSメソッドをリクエストした時に見られる

よく使うステータスコード【エラー系】

https://www.youtube.com/watch?v=e8kIOXsivOg&list=PLX8Rsrpnn3IVsi0NIDP3yRlFCS0uOZdqv&index=8

• 400：例）POSTメソッドで入力必須項目が空欄だった場合…etc
• 404：例）PUTやDELETEメソッドで、既に削除済みのデータに対しもう一度リクエストを送った場合…etc
• 500：例）データベースに接続しリクエストも投げたが、何らかの原因でSQLクエリの処理が失敗した場合…etc

ステータスコードとエラー処理

• ステータスコードに応じてエラーレスポンスを返そう

  • Acceptヘッダに応じたフォーマットでエラーを返す

    type/html：HTMLでエラーを示すページを作成して返す

    application/json：JSONでresponse.error.messageなどを表示する

• SPAのバックエンドとしてJSON形式のAPIを利用している時

  • ステータスコードに応じてコンポーネントを生成するのが便利だよ

    const fetchData = async () => {
    	const res = await fetch('<http://localhost:3000/episodes>');
    	if(res.status === 400) {
    		// クライアントエラーの処理
    	}
    }
    

0. エラー処理【共通】