JavaScriptコールバック関数、Promise、async、await

📌 コールバック関数

🔔 同期VS非同期

同期(Synchronous):処理にどれだけ時間がかかるかにかかわらず、待機してから処理します.

非同期:複数のトランザクションを並列に処理する

画像ソース:https://evan-moon.github.io/2019/09/19/sync-async-blocking-non-blocking/

🔔 Javascriptの同期特性

JavaScriptは単一スレッドです.

JavaScriptは同期して実行されます.(synchronous)
→エスケープ後、コード書き順に次々と同期して実行する.
※護衛:var,functionなどの宣言が最上端にアップされています.

JavaScriptに非同期処理が必要なのはなぜですか?
サーバからデータを受信するときに非同期処理を行わずに同期構成を行うと、データの受信を待機してブラウザが実行されます.

同期処理の場合、上記のロード画面に頻繁に遭遇する必要があります.
→このような不便を解消するために、受信データのコードと表示ページを非同期処理する.Javascriptでコールバック関数が使用されます.

🔔 コールバック関数とは?

コールバック関数(Callback function):後で呼び出される関数、イベントが発生した後に実行される関数

コールバックはjavascriptで非同期操作を処理する良い方法です.

コールバック関数は構文的特徴を持たず、呼び出し方式によって区分される.

コールバック関数を使用する理由

ユーザー・イベントの処理
ブラウザ画面で発生するユーザーイベントは予知できません.
したがって、これらのスクリーンイベントを管理するやつには、特定のイベントが発生したときに呼び出したいコンテンツをcallback関数に渡します.

ネットワークレスポンスの処理
画面側がサーバに要求すると、応答がいつ受信されるか分かりません.
したがって,これらのサーバに対する応答処理なども非同期処理が必要である.

時間遅延(アラームなど)を意識的に使用する

🔔 地獄

しかし上記のようにcallback関数を連続的に使うと、思わぬcallback地獄現象が発生します.
地獄
:コールバック関数を匿名関数に渡すプロセスを繰り返し、コードのインデントが深まります.
このコールバック地獄の欠点は可読性が悪く,コード修正が困難であることである.このようなコールバック地獄から逃れるために、PromiseとAsync+Awaitを使用します.

📌 に約束

🔔 に約束

保証する
:JavaScriptが提供する非同期イベントを簡単に処理できるオブジェクトです.(Object).

Promise構文

const promise = new Promise((resolve, reject) => {
  // code 작성
  // Promise는 Promise 생성자 함수를 통해 인스턴스화하여 사용하고,
  // 비동기 작업을 수행할 콜백 함수(resolve, reject)를 인자로 받는다.
});

resolve(value):

を呼び出し、作業が正常に完了したときに結果を表示します.

拒否(error):

を呼び出し、エラーまたは失敗が発生した場合にエラー・オブジェクトを指摘します.

Promiseステータス(States)

プロセスを使用するときに理解しなければならない最も基本的な概念は、プロセスステータスです.ここでいうステータスとは、new promise()を使用してプロセスを作成および終了する前に3つのステータスがあるプロセスの処理プロセスを指します.

終了(未定):非同期処理ロジックが完了していない(Result=Undefined)

Fulfilled(履行済み):非同期処理が完了し、プロセスから結果値(resule=value)

が返されます.

Rejected(失敗):非同期処理失敗またはエラー状態(Result=error)

Promise後続処理方法

.then
次に、メソッドは2つのコールバック関数をパラメータとして渡します.1番目のコールバック関数は正常(完了、解析関数が呼び出し状態)に呼び出され、2番目の関数は失敗(拒否、拒否関数が呼び出し状態)に呼び出されます.

.catch
例外(非同期処理で発生したエラー、メソッドで発生したエラー)が呼び出されます.

.finally
resolve、reject、または例外によるエラーにかかわらず、すべてのプロシージャの終了時に呼び出されます.

function1()
  .then(
    resolve(){}, // promise의 state = fulfilled일 때 resolve콜백 함수 동작.
    reject(){}) // promise의 state = rejected일 때 reject콜백 함수 동작.
  .catch(function error(){}) // 비동기적인 일 처리 중 Error 발생 시 해당 error 콜백 함수 동작.(state = rejected)
  .finally(function final(){}); // function1의 모든 비동기적 과정이 종료된 후 final 콜백 함수 동작.

Promiseフィルタ

非同期関数の処理結果を使用して他の非同期関数を呼び出す必要がある場合、関数の呼び出しが重なるため複雑度が増加するコールバックhellが生成されます.プロセスは、後続の処理方法を使用してフィルタ処理され、複数のプロセスに接続できます.これによりcallback helを解決します.

function1()
  .then(() => function2())
  .then(() => function3())
  .then(() => function4()) // 이렇게 후속 처리 메소드를 체이닝할 수 있다.
  .catch(() => error())
  .finally(() => final())

📌 async / await

async, await

async:文法糖(文法糖)で、promisをより便利に使用できます.
→関数の前にasyncを付けると、結果を直接返すのではなくプロセスを返します.

await:async関数でのみ使用可能なキーワード.

async,wait構文

async function promise() { // function 앞에 async를 붙이면 promise가 반환된다.
  await function(); // await를 적으면 비동기적인 처리가 모두 완료될때까지 기다렸다가 완료되면 함수가 동작한다.
  
  return result;
}

async,await特性

asyncキーワードは、関数の前に使用する必要があります.

waitはasync関数でのみ使用できます.

📌 リファレンスサイト

https://velog.io/@kimdlzp/%EC%BD%9C%EB%B0%B1callback
https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
https://dev.to/yatharth1706/promises-4a0
https://poiemaweb.com/es6-promise