TIL#41 JS)JavaScriptの非同期化


JavaScript


JavaScriptは、同期言語、ブロック言語、および単一スレッド言語です.これは、1回に1回しか作業できない特性を意味します.しかし、これらの特性はJavaScriptのすべてのコンテンツを意味するものではありません.
大量のデータベースを要求する必要がある場合は、どうすればいいですか?同期処理の場合、1つのタスクを要求して応答を待つ場合、別のタスクを待つ必要がある場合があります.そうすると、仕事の処理に時間がかかります.
JAvascriptは、これらの問題を解決するためのソリューションを提供します.JavaScriptを非同期言語と勘違いしているのは、JavaScriptを非同期で実行できるからです.

JavaScriptの非同期処理


これはJavaScriptの特性が,特定のコードの演算が終了するまでコードの実行を停止することなく,先に次のコードを実行することを意味する.

非同期処理

  • Ajax Web APIリクエスト:サーバがデータを受信する必要がある場合
  • ファイル読み込み:サーバからファイルを読み込む必要がある場合
  • 暗号化/復号化:直ちに処理できず、一定時間がかかる
  • 計画タスク:settimeoutによる非同期処理
  • 1. Callback


    calback関数は、パラメータとして特定の関数に渡される関数を表します.コールバック関数は、関数を渡す関数で呼び出されます.
    同期処理で最も簡単な解決策は非同期callbackを使用することである.
    function Callback(callback){
        console.log('콜백 함수');
        callback();
    }
    Callback(function(){
        console.log('콜백 받는곳');
    })
    関数の戻り値を受け取った後に非同期処理を行う必要がある場合は、上記の関数をコールバックとして非同期処理を行うことができます.
    しかし,コールバック関数は可読性が悪いため,エラーのリスクも増大する.非同期処理が次のように3つで終わらない場合、果てしなく横になったピラミッドが描画されます.
    function Callback(callback){
        function Callback2(callback){
            function Callback3(callback){
                console.log('무한콜백');
            }
        }
    }
    このような無限コールバックを解決するために、ES 7はPromiseをサポートし、ES 8はasync/awaitをサポートする.

    2. Promise


    Promiseは、JavaScriptで非同期タスクをより容易に処理するためにCalbackと同じ役割を果たすES 6に導入された機能です.
    違いは、完了後に実行される関数ではなく、プロセスが独自の方法を提供することです.そしてコール().そして.その後、()のような方法を連続的に使用することができ、コードの記述および理解をより容易にすることができる.
    const promise = new Promise ((resolve, reject) => {
    	//executor 실행자, 실행 함수.. 
    })
    resolveはnew Promiseの作成時に自動的に実行されます.executorのパラメータ解析、拒否はJavaScript自身が提供するコールバックです.
  • resolve:ジョブが正常に完了すると、結果を示す値とともに呼び出されます.
  • reject:エラーが発生した場合、エラーの対象を示すエラーとともに呼び出されます.
  • executorは自動的に実行され、ここで目的のことを処理します.処理が完了すると、resolveまたはexecuteが正常に呼び出されます.

    Promiseの3つの状態


    プロセスには3つのステータスがあり、ステータスはプロセスの処理プロセスを意味します.new Promise()を使用してプロセスを作成および終了します.3つのステータスがあります.
  • Pending:非同期処理ロジック未完了(待機)
  • Fulfilled:非同期処理が完了し、プロセスによって結果値が返された状態(成功)
  • Rejected:非同期処理に失敗またはエラーが発生した状態(失敗)
  • 成功すれば.その後()メソッドが実行され、失敗した場合は拒否が使用され、エラーはです.catch()メソッドを使用して処理します.

    Promiseでの異常処理

    add10(10)
      .then((res) => {
            throw 'test error';
        })
      .catch((err) => console.log(err));
    promiseは、タスクが失敗したときに自動的に実行されます.catch()メソッドを呼び出します.既存のtry-catchを使用して例外処理を行うことができますが、javascriptはpromiseのcatchを使用するように警告メッセージを出力します.

    3. async/await


    async/awaitはES 8構文としてpromiseに基づく最新構文である.これを使用すると、非同期の状況をより簡単に表現できます.
    async function 함수명(){
     await 비동기처리_메서드명();
    }
    asyncとawaitを使用するには、まず使用する関数の前にasyncキーを付け、宣言したasync関数でawaitキーのみを使用する必要があります.
    awaitは、関数がタスクを完了するのを待って結果値を返し、結果値が返されると次のタスクに移動します.

  • async
    asyncは関数の前にあります.functionの前にasyncを付けると、この関数は常にpromiseを返します.

  • await
    待つと約束が処理されるまで待つ.結果はその後返されます.一般関数では使用できません.async関数ではなくawaitを使用すると、構文エラーが発生します.上述したように,待機はasync関数でのみ発生する.
  • async/awaitの異常処理

  • .catch()を使用して異常処理を行うことができます.
  • async function f1() {
      const a = await add10(10).then(res => res);
      const b = await add10(a).catch(err => err);
      console.log(a, b);
    }
    f1();
    
    // f1은 promise를 리턴하므로 promise가 지원하는 메소드 사용 가능
  • 従来方式try-catchも利用可能.
  • async function f2() {
      try {
        const a = await add10(10);
        const b = await add10(a);
        console.log(a, b);
      } catch(err) {
        console.log(err);
      }
    }
    f2();