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

Copy
const sampleFunc = () => {
  // オブジェクト生成
  let xmlHttpRequest = new XMLHttpRequest();

  // responseTypeを設定（結果の型を指定）
  xmlHttpRequest.responseType = "json";

  // onreadystatechangeイベントでリクエストの状況を監視
  xmlHttpRequest.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      console.log(JSON.stringify(this.response,null,3));
    }
  };

  // アクセス方法とパスを設定
  // 通信方法
  // パス
  // true:非同期、false:同期
  xmlHttpRequest.open(
    "GET",
    "https://jsonplaceholder.typicode.com/todos/1",
    true
  );

  // 通信実行
  xmlHttpRequest.send();
};

sampleFunc()

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

Copy
const sampleFunc = () => {
  // オブジェクト生成
  let xmlHttpRequest = new XMLHttpRequest();

  // responseTypeを設定（受け取る型）
  xmlHttpRequest.responseType = "json";

  // onreadystatechangeイベントでリクエストの状況を監視
  xmlHttpRequest.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 201) {
      console.log(JSON.stringify(this.response,null,3));
    }
  };

  // アクセス方法とパスを設定
  // アクセス方法
  // パス
  // true:非同期、false:同期
  xmlHttpRequest.open(
    "POST",
    "https://jsonplaceholder.typicode.com/todos",
    true
  );

  // サーバに対して解析方法を指定する
  xmlHttpRequest.setRequestHeader(
    "Content-Type",
    "application/json; charset=UTF-8"
  );

  // 送るデータ
  const sendData = 
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  }

  // 通信実行
  xmlHttpRequest.send(JSON.stringify(sendData));
};

sampleFunc();

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

Copy
// Promise
const promiseFunc = () => {
  // 戻り値をPromiseで取得する
  return new Promise((resolve, reject) => {
    // オブジェクト生成
    let xmlHttpRequest = new XMLHttpRequest();
    // responseTypeを設定（受け取る型）
    xmlHttpRequest.responseType = "json";

    // onloadイベントでリクエストの状況を監視
    xmlHttpRequest.onload = (e) => {
      if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 201) {
        resolve(xmlHttpRequest.response);
      } else {
        reject(xmlHttpRequest.status);
      }
    };

    // アクセス方法とパスを設定
    // アクセス方法
    // パス
    // true:非同期、false:同期
    xmlHttpRequest.open(
      "POST",
      "https://jsonplaceholder.typicode.com/toos",
      true
    );

    // サーバに対して解析方法を指定する
    xmlHttpRequest.setRequestHeader(
      "Content-Type",
      "application/json; charset=UTF-8"
    );

    // 送るデータ
    const sendData = {
      userId: 1,
      id: 1,
      title: "delectus aut autem",
      completed: false
    };

    // 通信実行
    xmlHttpRequest.send(JSON.stringify(sendData));
  });
};

// 実行
promiseFunc()
  //通信成功時の処理
  .then((data) => console.log(JSON.stringify(data, null, 3)))
  // 通信失敗時の処理
  .catch((data) => console.log(JSON.stringify(data, null, 3)));

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

// 失敗
// 404

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

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

  // コールバッグ関数
  const result = () => {
    // 非同期処理を呼び出す
    return (
      getData()
        // 正常
        .then((data) => setPosts(() => data))
        // 異常
        .catch((message) => console.log(message))
    );
  };

  return (
    <div>
      <h2>データ</h2>
      <button type="button" onClick={() => result()}>
        データ取得
      </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>
  );
}

// 登録データ取得（Promise）
const getData = () => {
  // 戻り値をPromiseで取得する
  return new Promise((resolve, reject) => {
    // オブジェクト生成
    let xmlHttpRequest = new XMLHttpRequest();
    // responseTypeを設定（受け取る型）
    xmlHttpRequest.responseType = "json";

    // onloadイベントでリクエストの状況を監視
    xmlHttpRequest.onload = (e) => {
      let resultData;
      if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 201) {
        console.log(xmlHttpRequest.response);
        resultData = xmlHttpRequest.response;

        // オブジェクトを表示用にListに変換
        if ("object" === typeof xmlHttpRequest.response) {
          resultData = Object.values(xmlHttpRequest.response).filter(
            (prop) => typeof prop === "object"
          );
        }
        resolve(resultData);
      } else {
        reject("error");
      }
    };

    // アクセス方法とパスを設定
    // アクセス方法
    // パス
    // true:非同期、false:同期
    xmlHttpRequest.open(
      "POST",
      "https://jsonplaceholder.typicode.com/posts",
      true
    );

    // サーバに対して解析方法を指定する
    xmlHttpRequest.setRequestHeader(
      "Content-Type",
      "application/json; charset=UTF-8"
    );

    // 送るデータ
    const data = [
      {
        title: "a1 test",
        body: "this is test by a1",
        userId: 1
      },
      {
        title: "a2 test",
        body: "this is test by a2",
        userId: 2
      }
    ];

    // 通信実行
    xmlHttpRequest.send(JSON.stringify(data));
  });
};

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

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