【Javascript】Fetchを使ってサーバ（PHP）とデータのやり取りをする

はじめに

以前、jQueryを使ったAjaxの使い方について記事にしましたが、ライブラリに依存しないFetchという最近よく使われている方法をまとめてみました。

GET

サーバからデータを受け取りたい時。

JavaScript側

fetch('request.php') // サーバ側のphpファイル
    .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す
    .then(res => {
        console.log(res) // やりたい処理
    })
     .catch(error => {
        console.log(error) // エラー表示
    });

サーバ（PHP）側

request.php

<?php
// 渡したいデータ
$res = 'Hello World！'; // 配列や連想配列でも可

// echoすると渡せる
echo json_encode($res); // json形式にして渡す

POST

JavaScript側からサーバ（PHP）側にデータを送りたい場合。

サーバ（PHP）側で処理した結果を受け取る事もできます。

JavaScript側

const data = 'Hello World！'; // 渡したいデータ（配列やオブジェクトでも可）

fetch('request.php', { // 第1引数に送り先
    method: 'POST', // メソッド指定
    headers: { 'Content-Type': 'application/json' }, // jsonを指定
    body: JSON.stringify(data) // json形式に変換して添付
})
    .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す
    .then(res => {
        console.log(res); // やりたい処理
    })
    .catch(error => {
        console.log(error); // エラー表示
    });

サーバ（PHP）側

request.php

<?php
$raw = file_get_contents('php://input'); // POSTされた生のデータを受け取る
$data = json_decode($raw); // json形式をphp変数に変換

$res = $data; // やりたい処理

// echoすると返せる
echo json_encode($res); // json形式にして返す

フォームデータを送る場合

フォームデータを送る場合は、json形式にせずそのまま添付し、Content-Typeを指定しません。

JavaScript側

const formData = new FormData(); // フォームオブジェクト作成
formData.append('name', '山田太郎'); // フォームデータにnameを追加
formData.append('email', 'taro@yamada.com'); // フォームデータにemailを追加

fetch('request.php', { // 第1引数に送り先
    method: 'POST', // メソッド指定
    // Content-Typeは指定しない
    body: formData // bodyにそのまま添付
})
    .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す
    .then(res => {
        console.log(res); // やりたい処理
    })
    .catch(error => {
        console.log(error); // エラー表示
    });

例えば、こんなフォームがある場合

<form name="myForm">
    <input type="text" name="name">
    <input type="text" name="email">
    <input type="submit" value="送信">
</form>

こんな感じで送信できる

const myFormElm = document.forms.myForm; // フォーム要素を取得

myFormElm.addEventListener('submit', (e) => { // 送信ボタンが押されたら実行
    e.preventDefault();
    const formData = new FormData(myFormElm); // フォームオブジェクト作成

    fetch('request.php', { // 第1引数に送り先
        method: 'POST', // メソッド指定
        // Content-Typeは指定しない
        body: formData // bodyにそのまま添付
    })
        .then(response => response.json()) // 返ってきたレスポンスをjsonで受け取って次のthenへ渡す
        .then(res => {
            console.log(res); // やりたい処理
        })
        .catch(error => {
            console.log(error); // エラー表示
        });
});

サーバ（PHP）側

request.php

// $_POSTで受け取れる

// 例えば、年齢を追加して返す
$res['name'] = $_POST['name'];
$res['email'] = $_POST['email'];
$res['age'] = '25'; // 年齢を追加

// echoすると返せる
echo json_encode($res); // json形式にして返す

まとめ

AjaxとFetch、書き方などは似ていますが、ライブラリーに依存しない分、Fetchの方が高速らしいです。IEには非対応ですが（IEのサポートももうすぐ終了ですし）今後はこちらが主流になりそうですね。

どちらにしても、これらは非同期で動作することを意識して使わないと、思わぬ落とし穴にハマる事もあるので注意が必要です。