javascriptの非同期通信処理~fetchAPI~

Copy
fetch('URL等',{option}).then(...);

Copy
const fech = () =>
  fetch("https://jsonplaceholder.typicode.com/todos/1", {
    method: "GET"
  })
    .then((response) => {
      if (response.ok) {
        // jsonに変換する
        // Promiseで返却される
        return response.json();
      } else {
        // reject
        throw new Error(response.status);
      }
    })
    // response.json()のresolve
    .then((res) => {
      // jsonに変換したresをログ表示
      console.log(JSON.stringify(res, null, 3));
    })
    // rejectの結果を処理
    .catch((status) => console.log(status));

fech();

// 実行結果
// {
//    "userId": 1,
//    "id": 1,
//    "title": "delectus aut autem",
//    "completed": false
// }

Copy
// 非同期関数として定義（fetchをawaitで使うため）
const fechFunc = async () => {
  // 送信するデータ（JSON形式）
  const sendData = {
    title: "a1 test",
    body: "this is test by a1",
    userId: 1,
  };

  // fetchによる非同期通信（POSTリクエスト）
  // エラー処理は try-catch で行う
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST", // HTTPメソッド：POST（データ送信）
      headers: {
        "Content-Type": "application/json", // 送信データの形式を指定
      },
      body: JSON.stringify(sendData), // JavaScriptオブジェクトをJSON文字列に変換して送信
    });

    // レスポンスのステータスコードが成功（200台）以外の場合はエラーとして処理
    if (!response.ok) {
      throw new Error(response.status); // エラーステータスを例外として投げる
    }

    // レスポンスのJSONデータを取得（非同期処理）
    const data = await response.json();

    // 結果を整形してコンソールに出力（インデント3）
    console.log(JSON.stringify(data, null, 3));
  } catch (error) {
    // エラーが発生した場合にここで処理される
    console.log("Error:", error.message);
  }
};

// 非同期関数を実行
fechFunc();

// 実行結果
// {
//    "title": "a1 test",
//    "body": "this is test by a1",
//    "userId": 1,
//    "id": 101
// }

Copy
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React, { useState } from 'react';

export default function App() {
  const [post, setPosts] = useState([]);

  // POSTの登録処理
  const registData = async () => {
    // 送るデータ
    const sendData = [
      {
        title: 'a1 test',
        body: 'this is test by a1',
        userId: 1,
      },
      {
        title: 'a2 test',
        body: 'this is test by a2',
        userId: 2,
      },
    ];
    try {
      // fetchで非同期通信処理
      const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        // サーバに対してヘッダーで解析方法を指定する
        headers: {
          'Content-Type': 'application/json',
        },
        // 送るデータ
        body: JSON.stringify(sendData),
      });

      if (!res.ok) {
        throw new Error(response.status);
      }

      // レスポンスのJSONデータを取得（非同期処理）
      const data = await res.json();

      // オブジェクトを表示用にListに変換
      if ('object' === typeof data) {
        //stateを更新
        setPosts(() =>
          Object.values(data).filter((prop) => typeof prop === 'object')
        );
      }
    } catch (status) {
      console.log(status);
    }
  };

  return (
    <div>
      <h2>データ</h2>
      <button type="button" onClick={() => registData()}>
        データ取得
      </button>
      <div>
        {post &&
          post.map(({ userId, id, title }) => (
            <div css={Container} key={title}>
              <div css={item}>{userId}</div>
              <div css={item}>{title}</div>
            </div>
          ))}
      </div>
    </div>
  );
}

const Container = () => [
  css`
    display: flex;
    justify-content: flex-start;
  `,
];

const item = () => [
  css`
    text-align: center;
    width: 100%;
    border: 1px solid black;
  `,
];

Copy
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import React, { useEffect, useRef, useState } from 'react';

export default function App() {
  // 取得データstate
  const [post, setPosts] = useState([]);
  // 検索条件
  const [query, setQuery] = useState();
  const queryRef = useRef(null);

  // 検索処理
  const search = () => {
    // useRefの値でqueryのstateを更新
    if (queryRef.current.value) {
      setQuery(() => Number(queryRef.current.value));
    }
  };

  useEffect(() => {
    //queryのstateが更新された場合にデータ取得
    registData(query);
  }, [query]);

  // データ取得処理
  const registData = async (query) => {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/posts',
        {
          method: 'GET',
        }
      );

      if (!response.ok) {
        throw new Error(response.status);
      }

      const data = await response.json();

      // 画面表示データをqueryで絞り込んだデータで更新
      setPosts(() => data.filter((record) => record.userId === query));
    } catch (error) {
      console.error('データ取得に失敗しました:', error);
    }
  };
  return (
    <div>
      <h2>データ</h2>
      <input ref={queryRef} placeholder="Please input Number Only" />
      <button type="button" onClick={() => search()}>
        検索
      </button>
      <div>
        {post &&
          post.map(({ userId, id, title }) => (
            <div css={Container} key={title}>
              <div css={item}>{userId}</div>
              <div css={item}>{title}</div>
            </div>
          ))}
      </div>
    </div>
  );
}

const Container = () => [
  css`
    display: flex;
    justify-content: flex-start;
  `,
];

const item = () => [
  css`
    text-align: center;
    width: 100%;
    border: 1px solid black;
  `,
];