Promiseチェーン版 fetch() デモ

JavaScript コード

  fetch(url)

    .then(response => {


  if (!response.ok) {

    log(`→ response.status: ${response.status}`);

    log(`→ Content-Type: ${response.headers.get("Content-Type")}`);

    throw new Error("HTTPステータスエラー: " + response.status);

  };


  } else if (response.headers.get("Content-Type") !== "application/json") {

      log(`→ response.status: ${response.status}`);

      log(`→ Content-Type: ${response.headers.get("Content-Type")}`);

      throw new Error("JSON形式ではありません");


  } else {

    log(`→ response.status: ${response.status}`);

    log(`→ Content-Type: ${response.headers.get("Content-Type")}`);

    return response.json();

  }


  .then(profile => {

    displayUserProfile(prpfile);

  })


  .catch(err => {


    if (err instanceof TypeError && err.message.includes("Failed to fetch")) {

      log("Promise: reject");

      log("エラー発生: 通信エラー（ネットワーク不通、WiFiオフ、サーバー未起動など）");


    } else {
      log("エラー発生: " + err.message);
    }
  })


  .finally(() => {
    log("通信処理完了");
  });

  

PHP コード（user_profile.php）

<?php

sleep(5);




if (isset($_GET['raw'])) {

  header('Content-Type: text/plain');

  echo "これはJSONではありません";

  exit;

}




header('Content-Type: application/json');

echo json_encode([

  "name" => "増田健人",

  "email" => "masuda@example.com",

  "age" => 28

]);

?>