fetch 関数は通信の基本なのだが Promise やらなんやらの知識が必要になるので非プログラマには敷居が高い。 そういう人たち向けに脳みそを使わないでコピペで使えるようにしておく。

このような感じになる。

async function fetchHoge(v){
    var url = 'https://example.com/api/v123/hoge/' + v + '?apiKey=xxxxxxxxxxx', {
    let res = await fetch(url, {
        method: 'GET',
        mode: 'cors'
    });
    if (res.status === 200) {
        return await res.json(); // => "OK"
    }else{
        console.log(await(res.statusText)); // => Error Message
    }
}

こいつをこのように使うと結果の JSON を元にしたオブジェクトが戻ってくる

var hogeResult = await fetchHoge(42);

この async がつけられて作られた関数 return する結果を戻す Promise というモノをを返す非同期処理の関数となる。 この時点で難しい。

この関数を await 付きで実行すると非同期処理の終了を同期(待ってくれる)してくれて、 しかもその戻りは async の関数が return している内容そのものになる。

この await の関数実行記述には制約もあって、await 実行は async 宣言されている関数内でしかできない。

この fetch というメソッドには同期的処理をするオプションは無い。

なので、使うには Promise による非同期処理の知識が必須になる。

method の指定はデフォルトで GET になっているようで、get と間違えても通じてしまうようだが、 PATCH を patch と書くと通用しない場合がある。

const params = new URLSearchParams({
    "hoge": "ほげ",
    "piyo": "ぴよ",
    "fuga": "ふが"
});
console.log(params.toString());

↑のやりかたはわかりやすいが、同一キー名の複数パラメータができないので、↓このように書ける。

const params = new URLSearchParams();
params.append("hoge": "ほげ1");
params.append("hoge": "ほげ2");
params.append("piyo": "ぴよ");
params.append("fuga": "ふが");
console.log(params.toString());

const response = await fetch(
        "https://hogehoge.example.com/abc",
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: '{"name":"hogehoge", "age":20}'
        }
);
const result = await response.json();
console.log(result);

とかいうエラーが console に出る。本当にサーバ側が許可してなくて CORS できない可能性もある。

しかし、エンドポイント(対象のURL)の指定をミスっていて、そもそも対象の URL じゃないから出ている可能性もある。