JavaScriptのFetch APIでGET/POST通信をする (Fetchの使い方)

// < await 記述Pattern Ver. Get >

// 1. fetch 関数でGETリクエストを送信して、レスポンス(Promise)を変数に格納する。
const response = await fetch('https://jsonplaceholder.typicode.com/todos/');

// 2. fetch通信のResponseであるObjectに様々なデータが格納されています。 

// 3.Response.ok には、レスポンスが成功したか否かを通知する論理値が入ります。
if(response.ok){
    console.log("正常です");
}

// 4. Response.json()
// => レスポンスの本体のテキストを JSON として解釈した結果で解決するプロミスを返します。
const jsonData = await response.json();
console.log('response.json():', jsonData);

// < then() 記述Pattern Ver. Get >

fetch('https://jsonplaceholder.typicode.com/todos/')
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(e => console.error(e.message));

// Flag
let isLoading = false;
let confirmDialog = false;
let resultMsg = false;

// tryブロック: 処理の正常性をCheckするブロック
try {
  // Loading-アニメーション
  isLoading = true;
  let res = await fetch('https://jsonplaceholder.typicode.com/todos/');
  if (res.ok) {
    // 1. 通信処理に成功した場合の対応
    resultMsg = true;
    let fetchData = await res.json();
    console.log(fetchData);
  }

// catchブロック: エラーハンドリング
} catch (error) {
  console.error({ error });
  // 2. 通信処理に失敗した場合は、エラーメッセージを表示する！
  resultMsg = false;

// finallyブロック: 成功・失敗に関わらず、必ず実行する処理
} finally {
  // 3. await完了後に、Loading処理を終了 => ダイアログを表示する
  isLoading = false;
  confirmDialog = true;
}

console.log({
  isLoading,
  resultMsg,
  confirmDialog
});
// [ 出力結果 ]
// {isLoading: false, resultMsg: true, confirmDialog: true}

// < Response Object (Class)のプロパティを活用する >

// 1. fetch 関数でGETリクエストを送信して、レスポンス(Promise)を変数に格納する。
const response = await fetch('https://jsonplaceholder.typicode.com/todos/');


// 2. instanceof で Response-ClassのObjectかどうかをCheckする！
if (response instanceof Response) console.log('Response-Objectです');


console.log(' Response-プロパティ');

// 3. Response.body => 本文のコンテンツの ReadableStream です。
console.log('response.body:', response.body);
// [ 出力 ]
// response.body: ReadableStream {locked: false}

// 4. Response.headers => レスポンスに関連した Headers オブジェクトが入ります。
console.log('response.headers:', response.headers);
// [ 出力 ]
// response.headers: Headers {}

// 5. Response.ok には、レスポンスが成功したか否かを通知する論理値が入ります。
console.log('response.ok:', response.ok);
// [ 出力 ]
// response.ok: true

// 6. Response.redirected => レスポンスがリダイレクトの結果であるかどうかを示します。
console.log('response.redirected:', response.redirected);
// [ 出力 ]
// response.redirected false

// 7. Response.status => このレスポンスのステータスコードを返します。
console.log('response.status', response.status);
// [ 出力 ]
// response.status 200

// 8. Response.type => レスポンスの種類です (例えば basic, cors)
console.log('response.type:', response.type);
// [ 出力 ]
// response.type: cors

// 9. Response.url => レスポンスの URL を返します。
console.log('response.url:', response.url);
// [ 出力 ]
// response.url: https://jsonplaceholder.typicode.com/todos/

// Fetch APIの fetch 関数でGETリクエストを送信し、結果（レスポンス）をJSONで取得する例です。
const response = await fetch('https://jsonplaceholder.typicode.com/todos/');


// 1. Response.json()
// => レスポンスの本体のテキストを JSON として解釈した結果で解決するプロミスを返します。

const jsonData = await response.json(); // JSONで取得


// 2. Response.text()
// => レスポンスの本体のテキスト表現で解決するプロミスを返します。

const textData =  await response.text(); // テキストデータで取得


// 3. Response.arrayBuffer()
// => レスポンスの本体を表す ArrayBuffer で解決するプロミスを返します。

const bufferData = await response.arrayBuffer(); // バイナリデータバッファで取得


// 4. Response.formData()
// => レスポンスの本体を表す FormData で解決するプロミスを返します。

const formData = await response.formData(); // フォームデータで取得


// 5. Response.blob()
// => レスポンスの本体を表す Blob で解決するプロミスを返します。

const blobData = await response.blob(); // Blobで取得

// 1. フォーム（multipart/form-data）形式でPOSTする

// 2. FormDataクラスのインスタンスを作成する
const form = new FormData();
form.append('nama', 'Robotama');
form.append('address', 'Saitama');

// 3. Post通信
const formResponse = await fetch("https://httpbin.org/post", {
  method: "POST",   // HTTP-Methodを指定する！
  body: form        // リクエストボディーにフォームデータを設定
});

console.log(await formResponse.json());

// 1. application/x-www-form-urlencoded形式でPOSTする

// 2. URLSearchParamsクラスのインスタンスを作成する
const params = new URLSearchParams();
params.append('id', 123);
params.append('name', 'Robotama Gunmar');

// 3. Post通信をする
const postResponse = await fetch("https://httpbin.org/post", {
  method: "POST",   // HTTP-Methodを指定する！
  body: params,     // リクエストボディーにURLSearchParamsを設定
});

console.log(await postResponse.json());

// 1. JSON形式（application/json）でPOSTする

// 2. 送信するParameterを準備する
const requestBody = {
    msg: 'ロボ玉',
    from: 'グンマー帝国'
};

// 3. Post通信をする
const postRes = await fetch("https://httpbin.org/post", {
  method: "POST",  // HTTP-Methodを指定する！
  headers: {
    'Content-Type': 'application/json'  //
  },
  body: JSON.stringify(requestBody),    // リクエストボディーにJSONデータを設定
});

console.log(await postRes.json());