JavaScriptの非同期動作

学習ネットワークはaxio、promise、callbackなど多くの機能を学習することができる.また、文章を読むと、これらの機能は「非同期」動作に関係していることがわかります.今回の記事では、「非同期」とは何か、JavaScriptで「非同期」操作を実現する方法について簡単に説明します.

非同期と同期

ワークボディとオブジェクトが2つ以上ある場合は、非同期と同期を区別します.

非同期

タスクの開始/終了時間および順序を特定できません.

作業主体の作業開始/終了瞬間が一致しない場合

.

同期

タスクの開始/終了時間と順序

タスク本体のタスク開始/終了瞬間が一致する場合

Block vs non-Block

タスクの主体とオブジェクトが2つを超える場合は,blockとnon-blockを区別する.

Block

オペレータが他のオペレータへの要求を待つ

non - Block

あるオペレータは、他のオペレータに要求する前に別のタスク

を実行する.

非同期、同期、ブロック、非ブロック

実際には、非同期および同期を区別する基準と、ブロックvs非ブロックを区別する基準は異なる.したがって、以下の組み合わせを行うことができます.

非同期-block

非同期-非ブロック

同期ブロック

同期-非ブロック

JSでの非同期動作

背景

基礎プログラミングでは,ほとんどが関数の開始と終了を論理的に予測できる.
これらの動作の開始/終了時間と順序を決定できる動作を同期動作と呼ぶ.
たとえば

	1) A = 1 
	2) B = A + 1
	3) C = A + B

実行するためには、1)->2)->3の順に実行する必要があります.
しかし,Webプログラミングではこのような場合がある.

	1) Client가 api server에 데이터 요청을 보내고 응답을 받음.
	2) Client는 소수 1000개를 구하는 연산을 함.
	3) Client는 api server에서 받은 데이터와 소수 1000개를 각각 더함.

上記の操作を行うために,1)と2)の順序および1)の終了時間を特定することはできない.
(別のサーバにデータ要求を送信すると、クライアントはその要求がいつ完了するか分かりません.)
このように、多くの操作では、開始時間と終了時間の未知の操作を非同期操作と呼ぶことがある.

イベントループ

Jsはこれらの非同期動作をイベントループによって処理する.

1. Call stack에서 비동기 callback함수가 호출되면 (api에 요청을 보내는 함수 + 더하는 함수)
2.  해당 비동기 callback 함수를 background(Web API)로 이동한다. 
3. 여기서 background는 call stack이 실행되는 스레드와는 독립적으로 동작한다. 
(응답이 올 때 까지 기다리는 동작 수행)
4. 비동기 작업이 마무리되면 내부함수(소수 1000개와 응답을 더하는 동작)를 task queue 전달한다.
5. Task queue에 전달된 내부함수는 call stack이 빌 때 까지 기다린다.
6. 독립적으로 돌아가는 call stack의 모든 함수가 실행되고 나면 (anonymous까지 종료)
7. 그 때 task queue(callback queue)에 있던 내부함수를 call stack으로 올려서 해당 내부함수를 수행한다.

上記の方法では、Jsはバックグラウンドでサーバのapi応答を待機し、callstackの動作は独立して実行される.
このような非同期操作をバックグラウンドで実行するには、非同期callback関数を使用する必要があります.

コールバック関数とは?

は、他の関数パラメータとして使用される関数である.

イベントによって呼び出された関数.
CallBack関数はその名の通り後に呼び出された関数である.
コールバック関数自体には、特別な宣言や構文フィーチャーはありません.
コールバック関数も普通のJavaScript関数です.
コールバック関数は、コードによって明示的に呼び出される関数ではなく、開発者が関数を記録し、イベントが発生したり、時点に達したりしたときにシステムによって呼び出される関数です.

JavaScriptは非同期callback関数とイベントループによって効率的に非同期操作を実現します.
しかし,このcallback関数は可読性が悪く,デバッグが困難であるなどの欠点がある.

プロミスとは何ですか。

この問題を解決するために、約束という機能が現れた.その内部動作は基本的にcallbackと同じである.
しかしpromise自体もデバッグに困難をもたらした.これを改良し,async/awaitが出現した.

Ajax

•JavaScriptによるサーバとブラウザ間の非同期データ交換
Ajaxは、ページ全体を再ロードすることなく、ページの一部のみをリフレッシュできます.
すなわち、Ajaxは、バックグラウンド領域でサーバと通信することができ、結果をWebページの一部にのみ表示することができる.
Fetch APIとAxioはpromiseによって実現される.

Reference

https://velog.io/@codemcd/Sync-VS-Async-Blocking-VS-Non-Blocking-sak6d01fhx

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API