[JS] Fetch API で GET する

JavaScript の Fetch API を利用して、GETのリクエストを行い、JSONの値を取得します。
fetch にて URL を渡すと GET でリクエストが行えます。

fetch('https://kidatti.sub.jp/json.php')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log(error))

GETで値を渡すには、URLにパラメータを追加します。下記のようなURLを組み立ててみます。
https://kidatti.sub.jp/json.php?name=Name&email=Email
URLSearchParams で ? 以降の部分の組み立てができます。

// パラメータ
const params = {
    "name": "Name",
    "email": "Email",
};
const query = new URLSearchParams(params);
fetch('https://kidatti.sub.jp/json.php?' + query)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log(error))

1つずつ追加する方法もあります。

const url = new URL('https://kidatti.sub.jp/json.php')
// パラメータ
url.searchParams.append("name", "Name")
url.searchParams.append("email", "Email")
fetch(url.toString())
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log(error))

JavaScriptJavaScript

Posted by kidatti