同期と非同期


1.同期


1)定義

  • コードを実行し、その結果値を待って、次のコードを実行する処理を指す.
  • 同期で結果を待つプロセスをブロックと呼ぶ.
  • 2)特徴

  • 通常、コード処理の方法は同期される.
  • セグメントでは、関数が実行される作業が多い場合、処理が完了するまで次のコードを実行できないことが問題になります.
  • したがって,前の関数で得られた値が次のコードに必要な値である場合,同期方式で記述する.

    2.非同期


    1)定義

  • コードを実行し、結果値がいつ取得されるか分からない場合は、次のコードを実行します.
  • 非同期非同期非待機結果をnon-blockingと呼ぶ.
  • 2)特徴

  • は、ある関数を実行して結果を得る前に、次のコードに移動する.
  • の結果を受け入れる関数をコールバック関数と呼ぶ.
  • 非同期コードの実行結果は、同期コードがすべて実行された後に返される値である.
  • 3)非同期処理が必要な理由


    中にはasync/awaitも書いてあります
  • JavaScriptは基本的に同期コードです.
  • 非同期処理に時間がかかるコードがない場合、
  • という問題が発生する可能性があります.
    例えば、
  • は、サーバがユーザデータを受信し、ウェブページに出力する.
  • のデータを受信するには10秒かかりますが、非同期処理を行わないと空のデータが出力されます.
  • 非同期処理を行う場合、データをインポートする前に、少なくともデータのない文を表示することが必要です.
  • ,つまり,非同期処理があれば,いつユーザのデータが届くかは分からないが,コールバック関数が登録されていれば,ユーザのデータが準備されていれば,登録されたコールバック関数が呼び出される.
  • 4) AJAX

  • JavaScriptによるサーバとブラウザ間の非同期データ交換
  • 新しいデータをロードするときはページをリフレッシュする必要はなく、部分的にリフレッシュするだけでデータ
  • をロードすることができる.

    3.非同期処理タイプ


    コールバック関数を外してからにしよう

    1) Promise


    正義

  • Promisは、JSが提供する非同期コードを簡単に処理できるオブジェクトです(実際にはすべての非同期処理がこの目的のためです).

    ②論理

    // 프로미스를 사용하면 반드시 resolve와 reject를 호출해야 함
    const condition = true;
    const promise = new Promise((resolve, reject) => {
      if (condition) {
        resolve('resolved');
      } else {
        reject('rejected');
      }
    });
    
    promise
      .then((res) => {
        console.log(res);
      })
      .catch((error) => {
        console.error(error);
      });
  • プロセスが機能を実行した後に正常に実行されると、成功メッセージと処理後の結果値が渡されます.
  • ですが、機能の実行中に問題が発生した場合、エラーが送信されます.
  • 実行->保留->履行または拒否
  • 2) async / await


    正義


    非同期処理API
  • は、「待ち」Promiseを単純かつ同期的に見せる
  • は最近出現した非同期処理構文であり、既存のコールバックまたはPromiseの欠点を解消することを目的としている.
  • callbackまたはPromiseの場合、後続コードが発生する可能性があるという欠点があります.人々はよく白地獄、then()地獄と呼ばれている.
  • Promise戻り値は、
  • 待ちで取得できます.
  • ②論理

    
    const condition = true;
    const promise = new Promise((resolve, reject) => {
      if (condition) {
        resolve('resolved');
      } else {
        reject('rejected');
      }
    });  
    
    const getResult = async() => {
      try {
        const result = await promise;
        console.log(result);
      } catch (err) {
        console.error(err);
      }
    }
  • ですが、async/awaitを使用するには、awaitがasync関数でのみ実行されるという前提条件があります.
  • は通常waitターゲットである非同期処理コードがAxiosなどのプロセスを返す関数である.
  • 3)Promiseとasync/awaitの違い


    後者の圧勝

    ①エラーコントロールリング

  • Promiseを使用する場合.catch()ゲートでエラー制御が可能です.
  • async/awaitはエラー処理機能がなく、try-catch()文を使用する必要があります.
  • ②コード可読性

  • Promiseの.地獄の可能性
  • コードが長ければ長いほど、async/awaitを使用するコードの可読性が向上します.
  • async/awaitは、同期コードのように非同期コードを読み取ることを可能にする.コードストリームを理解しやすい.