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

2023/03/22 に公開
PHP
API
JavaScript
tech
JavaScriptのFetch APIと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と離れた場所に書けるので見やすい。
JavaScript | async, awaitを利用して非同期処理を制御 - わくわくBank