JavascriptからPOSTでAPIを呼び出して値を取得する(fetch)

JavaLearning

ソースコード

フォームデータを作成してAPIのURLに対して送ってあげます。
APIからの戻り値を、data 変数に格納するようにしてみます。

let form = new FormData();
form.append("parameter", "parameter");

const url = "https://example.com/api";
fetch(url, {
　　　　　　　　method: 'POST',
　　　　　　　　body: form,
})
.then(response =>  response.text())
.then(data => {
　　　　　　　　　console.log(data);
});

注意点

fetch関数は非同期で実行されます。
そのため、以下のように書くと思ったように変数に値が格納されません。

let form = new FormData();
form.append("parameter", "parameter");

let result = "";
const url = "https://example.com/api";
fetch(url, {
　　　　　　　　method: 'POST',
　　　　　　　　body: form,
})
.then(response =>  response.text())
.then(data => {
　　　　　　　　　result = data;
});

console.log(result);

理由は非同期なのでfetchの処理が終わらないうちに次の処理に移ってしまいます。
処理順序が「console.log」 → 「result = data」の順番になってしまい、思った通りの処理にならないのです。
それを防ぐため、同期させたい場合は「await」をつけてあげましょう。

let form = new FormData();
form.append("parameter", "parameter");

let result = "";
const url = "https://example.com/api";
await fetch(url, {
　　　　　　　　method: 'POST',
　　　　　　　　body: form,
})
.then(response =>  response.text())
.then(data => {
　　　　　　　　　result = data;
});

console.log(result);

これで「console.log」を呼び出した時に、取得した値が格納されていることを確認できるはずです。
awaitを含む関数には「async」をつけてあげる必要があるのでそちらも忘れずつけていきましょう。