Zenn
🐍

JavaScriptのFetch APIとPHPのAPIそれぞれで後で見やすい書き方を考えてみる

2023/03/23に公開
PHP
API
JavaScript
tech

JavaScriptのFetch APIとPHPのAPIそれぞれで後で見やすい書き方を考えてみました。

実装する挙動

Fetch APIでint型の値「num1」「num2」をAPIに送り、値を受け取ったAPIは「num1+num2」の値を返す。

PHPのAPIの実装

ソースコードは下記の通り。

header('Content-Type: application/json;  charset=UTF-8');

//POST値の受け取り
$json = file_get_contents('php://input');
$params = json_decode($json, true);

if($params === null){
  http_response_code(400);
  print json_encode(['error_message' => 'json形式のデータを送信してください']);
  exit;
}

//値のチェック
$num1 = filter_var($params['num1'] ?? null, FILTER_VALIDATE_INT);
$num2 = filter_var($params['num2'] ?? null, FILTER_VALIDATE_INT);

if( $num1 === false || $num2 === false){
  http_response_code(400);
  print json_encode(['error_message' => 'パラメータの形式に誤りがあります']);
  exit;
}

$response = [
  'result' => $num1+$num2,
];

http_response_code(200);
print json_encode($response);

気をつけた点

受け取った値の型がおかしいといった、不備が発生する場所では、その場で処理を終了し、HTTPレスポンスステータスコードとエラーメッセージを返す。これにより処理の流れが一直線になるため、他の人がソースコードを見る際に理解しやすい。

あと問題が発生した場合はエラーメッセージだけでなく、エラーのステータスコードを返す。これにより、Fetch APIでのエラー判定がしやすくなる。

Fetch APIの実装

ソースコードは下記の通り。

const ajax = async () => {
  const url = "api.php"

  const data = {
    'num1' : 1,
    'num2' : 2,
  }

  const response = await fetch(url, {
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data),
  });

  //HTTPレスポンスステータスコードのチェック
  if(response.status === 200){
    console.log("通信成功")
    console.log(await response.json())

  } else if(response.status === 400){
    console.log("送信データに誤り")
    console.log(await response.json())
  
  } else {
    console.log("未定義エラー")
  }
}

ajax()

気をつけた点

thenによるコールバック処理を書くよりもasync/awaitを用いた方が、受け取ったステータスコードによる条件分岐がfetchと離れた場所に書けるので見やすい。

参考資料

Discussion