React - 非同期と同期

非同期と同期

概念

動機

• サーバーで作業が終了するのを待ってから、次の作業を実行する方式の通信 -- コードを簡単に記述できるが、複数の作業が同時に実行される場合、性能低下の欠点がある

非同期

• リクエスト送信後、応答を待たずに次の処理を実行する通信方式
  - 商品リストの取得やダウンロード処理などが例として挙げられる
  - 複数の処理を同時に処理する場合や並列処理に適している
  - 全体の処理性能を向上させることができる
  - JavaScriptではpromiseがよく使用される
  

非同期の種類

Ajax

• Asynchronous Javascript And XMLの略称で、JavaScriptを用いて非同期方式でサーバーから必要なデータを取得し、ページ上で変更が必要な部分のみを更新する技術- 主な目的は画面の切り替えなしにクライアントとサーバー間で情報を交換することである

長所

• ページ更新なしでサーバーとクライアント間の非同期通信を実現可能- 速度面で性能改善が可能- 別途プラグインが不要- HTTP転送中でもウェブアプリとの相互操作が可能

アクシオス

• ブラウザ、Node.js向けのPromise APIを使用したHTTP方式の非同期通信ライブラリ

特徴

• 環境に応じて、ブラウザのXMLHttpRequestやNode.jsのHttp APIを使用する- Promise APIを使用する- HTTPのリクエスト/レスポンスをJSON形式に自動的に変換する- リクエストのキャンセルやタイムアウトの設定が可能である- Fetchに比べてより多くの機能を備えている

Fetchとの比較

フェッチ

• 組み込みライブラリであるため、importなしで利用可能 - サポートしていないブラウザが存在する - Promiseを返却し、JSONに変換する必要がある - ネットワーク障害／リクエストが完了しなかった場合のみ、rejectでレスポンスを返却可能 - 400/500系のエラーはresponse.okを直接確認する必要がある

希望

• データを直接送信する- 要求を途中でキャンセル／タイムアウト設定などの機能がある- 400/500系のエラーが発生した場合、rejectでレスポンスをキャッチできる- プロジェクトの上位にインポートする必要がある

データ伝送

• **response **: オブジェクトとして渡す- fetch: JSON, stringify() でシリアライズして渡す

正常なリクエスト／レスポンスチェック

• **response **: statusが200かどうか、statusTextを通じて確認- fetch: オブジェクトがokプロパティを含むかどうか確認

応答を得る方法

• response: responseオブジェクトのdataプロパティにアクセスして取得- fetch: responseオブジェクトにjson()メソッドを呼び出し、jsonオブジェクトを取得する

約束

• Reactで非同期処理に活用されるオブジェクトであり、ウェブサービスにおけるデータ通信の目的で使用される

• Promiseは3つの状態を持つ

  1. Pending(待機) - 初期状態であり、履行または拒否されていない状態 - オブジェクトを生成した際の状態で、**resolve(実行)とreject(失敗)**を引数として持つ
  2. Fulfilled(履行) - 非同期ロジック処理が完了した状態で、Promiseの結果値を返却した状態3. Rejected(失敗) - 非同期ロジック処理の失敗またはエラー状態

• ES7からはasync/awaitを利用して非同期コードを同期コードのように記述可能

  • Promiseを使用すると、then()を利用して別のPromiseを呼び出すことで長さが伸びる

    これはAsync/Awaitを利用して解決可能である

使用方法

Ajax

- url: 要求するURL- type: 実行するメソッド(GET, POST, PUT, DELETE)- async: デフォルト値はtrue。falseに設定すると同期通信で実行される- data: 渡すパラメータ- dataType: サーバーから返すデータ形式(xml, html, json...)

#### アクシオス

##### 要求

**基本構造**

react axios({ url: 'アドレス', method: '', data: { //送信するデータ } })

##### url

- 送付先住所

##### メソッド

- GET、POST、DELETE、PUTなどを使用可能

##### データ

- bodyに送信するデータとして、リクエスト方式がPUT、POST、PATCHの場合に使用する

##### 応答

- 応答を受け取った場合は、**.then**を利用して処理が可能である

###### プロパティ

- **data**: サーバーが提供したレスポンス - **status**: サーバーのHTTPステータスコード - **statusText**: サーバーレスポンスからのHTTPステータスメッセージ - **headers**: 'headers' サーバーが応答したヘッダーは、すべてのヘッダー名が小文字で提供される
- **config**: 要求に対して 'axios' に設定された構成 - **request**: 応答を生成した要求 - **ブラウザ**: XMLHttpRequest インスタンス - **Node.js**: ClientRequest インスタンス

###### ショートカットメソッド

- GET、POST、PUT、DELETEなどが存在する- **GET**: axios.get(url[, config])- **POST**: axios.post(url, data[, config])- **PUT**: axios.put(url, data[, config])- **DELETE**: axios.delete(url[, config])

#### 約束

##### 非同期

- 関数の前に async を付けて、通常の関数を非同期関数にできる- 使用する場合、通常の関数のように値を返さず、Fulfilled Promise を返す

##### 待機

- 約束を待つために使用される演算子で、非同期関数内部でのみ使用可能

~~~ [rv] = await 式; ~~~

- **rv** : Promiseの場合、満たされる値が返され、Promiseでない場合はその値自体が返される- **expression**: Promiseまたは待機する値

フェッチ

**基本構造**

react fetch("Address", { method: "", //オプション headers: {}, //オプション body: JSON.stringify({}); }) .then() .then() .catch()

フェッチ():

- 送信先アドレス、メソッド方式、リクエスト情報などを保持している

- APIアドレスを受け取り、**必須**引数である - http://주소 または ドメインアドレス*with ポート番号)、エンドポイント

メソッド

- methodはデフォルト値はGETで、POST、PUT、DELETEなどを使用可能であり、省略可能である

ヘッダー

- Content-Type: "application/json" を主に使用します

###### 本文

- GETメソッドでは使用しない- JSON.stringifyを利用してシリアライズして使用する必要がある

- **then()**: 受け取るデータの形式を設定するもの - 応答を受け取り、json()メソッドでパースしたjson()値を返す

- **then()**: 実際のデータが格納される場所 - 返されたJSON値を受け取り、任意の処理が可能

<br><br><br><br><br><br><br><br><br><br><br>

------

参考資料

[同期(Synchronous)と非同期(Asynchronous)の違いは何ですか？](https://won-percent.tistory.com/150)

[[React] Async & Awaitとは？](https://narup.tistory.com/216)

[AXIOSのインストール＆特徴＆文法 💯 まとめ](https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)

[JavaScript Promiseの概念と文法をマスターする](https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-Promise)

[Ajax - 概念と使用方法(同期、非同期)](https://sjparkk-dev1og.tistory.com/27)

[[React] axios と fetch の違い](https://velog.io/@sunkim/React-axios-%EC%99%80-fetch-%EC%B0%A8%EC%9D%B4%EC%A0%90)

[[React] Async & Awaitとは？](https://narup.tistory.com/216)

[JavaScript fetch().then() の使い方について](https://velog.io/@journy002/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-fetch.then-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0)