【JavaScript】fetch()を使ってみる

こんにちは。

本日はJavaScriptメモです。

概要

Fetch APIを用いたデータのやり取りをやってみる。
GETとPOSTで、POSTで送信するデータはJson形式です。

今回、サーバ側はJavaを使用しました。

@RestController
@RequestMapping("/api")
public class FetchSampleApi {
    public static class FetchSampleReq {
        private String id;
        private String name;
    
        public void setId(String id) {
            this.id = id;
        }

        public String getId() {
            return this.id;
        }

        public void setName(String name) {
            this.name = name;
        }
    
        public String getName() {
            return this.name;
        }
    }

    public static class FetchSampleRes {
        String result;
        String message;

        public void setResult(String result) {
            this.result = result;
        }

        public String getResult() {
            return this.result;
        }

        public void setMessage(String message) {
            this.message = message;
        }

        public String getMessage() {
            return this.message;
        }
    }

    @PostMapping("postMethod")
    public FetchSampleRes postMethod(@RequestBody FetchSampleReq req) {
        String msg = "";
        msg += req.getId();
        msg += ":";
        msg += req.getName();
        msg += "さん、こんにちは！";

        FetchSampleRes res = new FetchSampleRes();
        res.result = "POST OK";
        res.message = msg;

        return res;
    }

    @GetMapping("getMethod")
    public FetchSampleRes getMethod(String id, String name) {
        String msg = "";
        msg += id;
        msg += ":";
        msg += name;
        msg += "さん、こんにちは！";

        FetchSampleRes res = new FetchSampleRes();
        res.result = "GET OK";
        res.message = msg;

        return res;
    }
}

JavaScript

fetchはPromiseを返します。
非同期処理なので、サンプルではawaitを使用して待機しています。

レスポンスのデータは、json()を使用して解析します。
こちらも非同期処理なので、awaitを使用して待機します。

GET

async function doGet() {
    const p = await fetch("http://localhost:8080/api/getMethod?id=1&name=Bob")
    const res = await p.json()

    console.log(`result = ${res.result}`)
    console.log(`message = ${res.message}`)
}

デベロッパーツールを使用して出力を確認すると以下の出力となっています。

result = GET OK
message = 1:Bobさん、こんにちは！

POST

POSTの場合、fetchの第２引数にオプションを指定します。
オプションに設定できる項目はいくつかありますが、
本サンプルでは以下の項目を設定します。

• method：リクエストするメソッドです。デフォルトはGET
• headers：リクエストに追加するヘッダーです
• body：リクエストに追加する本文です

async function doPost() {
    const sendData = {
        'id': '2',
        'name': 'Bob'
    }

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(sendData)
    }

    const p = await fetch("http://localhost:8080/api/postMethod", options)
    const res = await p.json()

    console.log(`result = ${res.result}`)
    console.log(`message = ${res.message}`)
}

デベロッパーツールを使用して出力を確認すると以下の出力となっています。

result = POST OK
message = 2:Bobさん、こんにちは！

以上です。