【JavaScript】fetchでform-dataを送信する

こんにちは。
本日はJavaScritptメモです。

概要

fetchに関しては以前以下の記事を上げました。

【JavaScript】fetch()を使ってみる - なんだかGoodVibes

上記の記事では、Content-Typeをapplication/jsonとして送信していましたが
form-dataとして送信する方法を知ったのでメモです。

サーバ側(Java)

以前と同様に、サーバ側はJavaを使用します。
要求と応答用のクラスは前回と同様ですが、
Postメソッドの引数のアノテーションが前回と異なっています。

@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("formPost")
    public FetchSampleRes formPost(@ModelAttribute FetchSampleReq req) {
        String msg = "";
        msg += req.getId();
        msg += ":";
        msg += req.getName();
        msg += "さん、こんにちは！";

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

        return res;
    }

Javascript

前回と同様にfetchを使用しています。

form-dataを送信する場合、
Content-Typeの設定を行わないことで
form-dataとして送信してくれます。

async function doFormPost() {
    const fd = new FormData()
    fd.append('id', '3')
    fd.append('name', 'Bob')

    const options = {
        method: 'POST',
        body: fd
    }

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

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

結果は以下です。

result = FormData OK
message = 3:Bobさん、こんにちは！

以上です。