【ワンピースで覚えるJavaScript】第３５回 fetch API・非同期通信(プログラミング入門講座)

2023年7月29日 14:27

Javascriptで、fetch APIの使い方を説明します。

難しい感じがしますが、書き方は決まっているので、慣れてしまえば簡単です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <h1>fetch(非同期通信)</h1>
    <button id="btn1" class="btn btn-info mb-3">
      ルフィ
    </button>
    <p id="result"></p>

    <h1>fetch(通信エラー)</h1>
    <button id="btn2" class="btn btn-info mb-3">
      ウソップ
    </button>
    <p id="result2"></p>

    <h1>fetch(クエリ情報)</h1>
    <form>
      <label for="name" class="form-label d-block">
        好きなキャラクター
      </label>
      <input type="text" name="name" 
        class="form-control w-50 d-inline" id="name" 
        autocomplete="off">
      <input id="btn3" type="button" 
        class="btn btn-primary" value="送信">
    </form>
    <p id="result3"></p>

    <h1>fetch(POST)</h1>
    <form id="formdata">
      <label for="devil_fruit" 
        class="form-label d-block">悪魔の実</label>
      <input type="text" name="devil_fruit" 
        class="form-control w-50 d-inline"
        autocomplete="off">
      <input id="btn4" type="button"
        class="btn btn-primary" value="食べる">
    </form>
    <p id="result4"></p>

    <h1>fetch(JSON形式)</h1>
    <button id="btn5" class="btn btn-info mb-3">
      チョッパーとは
    </button>
    <p id="result5"></p>
    <script src="index.js"></script>
  </body>
</html>

//fetchメソッドは引数で指定したURLに対して、HTTPリクエストを行う
let btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () => {
  console.log(fetch("luffy.php"));
  //fetchメソッドはResponseオブジェクトを結果に持つPromiseを返す
    //Promise 非同期処理の「状態」と「結果」を表すオブジェクト
    //Promiseの状態がfulfilledかrejectedの時に
      //thenの引数のコールバック関数が実行される
  fetch("luffy.php") //非同期通信開始
  .then(function(response){
    console.log(response);
    return response.text(); //レスポンスの形式に応じて取り出す
  }).then(function(data){   //ページに反映
    document.getElementById("result").textContent = data;
  })
});

//通信エラー
let btn2 = document.getElementById("btn2");
let result2 = document.getElementById("result2");
btn2.addEventListener("click", () => {
  fetch("usopp.php")
  .then(function (response) {
    if (response.ok) {
      console.log(response);
      return response.text();
    }

    throw new Error("うそだよー");//例外を投げる
  }).then(function (data) {
    result2.textContent = data;
  }).catch(function(error){//エラーを処理
    result2.textContent = error;
  })
});

//クエリパラメータ
let btn3 = document.getElementById("btn3");
let result3 = document.getElementById("result3");
let chara_name = document.getElementById("name");
btn3.addEventListener("click", () => {
  //JavaScriptを用いてURLにクエリを入れる方法
  let params = new URLSearchParams();
  console.log(params);
  //キーと値をパラメータに設定
  params.set("name", chara_name.value );
  //クエリパラメータを返す（文字を自動的にエスケープ）
  console.log(params.toString());

  fetch("chara.php?" + params.toString())
    .then(function (response) {
      return response.text();
    }).then(function (data) {
      result3.textContent = data;
    })
});

//POSTデータを送信
let btn4 = document.getElementById("btn4");
let result4 = document.getElementById("result4");
let formdata = document.getElementById("formdata");

btn4.addEventListener("click", () => {
  //FormDataオブジェクトとは、
    //サーバーにデータを送信する際に使用するオブジェクト
  let data = new FormData(formdata);
  /*  let formData = new FormData();
      formData.append("キー", "値");   */
  console.log([...data]);

  fetch("devil.php", {
    method: "POST",
    body: data,
  })
    .then(function (response) {
      return response.text();
    }).then(function (data) {
      result4.textContent = data;
    })
});

//JSON形式のPOSTデータを送信
let btn5 = document.getElementById("btn5");
let result5 = document.getElementById("result5");

let info = {
  devil_fruit: "ヒトヒトの実",
  bounty: 1000
};

btn5.addEventListener("click", () => {
                //JSON形式に変換
  console.log(JSON.stringify(info));
  fetch("chopper.php", {
    method: "POST",
    headers: {   //デフォルトtext/plain(テキストファイル)
      "content-type": "application/json",
    },
    body: JSON.stringify(info),
  })
    .then(function (response) {
      return response.text();
    }).then(function (data) {
      result5.textContent = data;
    })
});

<?php
  $luffy = "海賊王になる男";
  print($luffy);

<?php
  $name = htmlspecialchars(
      $_GET['name'], 
      ENT_QUOTES, 
      "UTF-8"
    );

  print("私が好きなのは".$name."です");

<?php
  $devil_fruit = htmlspecialchars(
      $_POST['devil_fruit'],
      ENT_QUOTES,
      "UTF-8"
    );

  print("私は「".$devil_fruit."」の能力者");

<?php
  //コンテンツタイプが application/jsonのときは$_POSTを避ける
  //php://input から生のデータを引っ張り出す
    //php://input => 送信されたbody部
    //file_get_contents => データ部の文字列化(JSON)
    //json_decode => オブジェクトに変換
  
  $data = json_decode(file_get_contents("php://input"));
  //クラスオブジェクトとして変換するので値を取り扱う際アロー演算子
  print($data->devil_fruit."の能力者で、懸賞金は"
                            .$data->bounty."ベリー");
  //連想配列としてデコードしたい場合は
//json_decode(file_get_contents("php://input"), true);

この記事が気に入ったらサポートをしてみませんか？