非同期

動機。非同期。

同期(sync):リクエストが完了するのを待っています.
->通常書かれているコードは同期して実行されます.
非同期(async):他のステップの実行を要求し、消えます.

非同期の例

setTimeout

function multiply (a, b) {
  return a * b;
}

function square (n) {
  return multiply(n, n);
}

console.log("Start");

setTimeout(function doSomething () {
  const result = square(2);
  console.log(result);
}, 1000);

console.log("end");

fetch

// fetch: 서버에 요청을 넣는 함수 - 요청이 응답받으면 then의 인자로 오는 함수가 실행
fetch(("요청".then((res) => { console.log("Response", res)})

Callback

非同期で実行される関数には、関数内のすべての操作を処理した後、実行する必要がある関数を含むコールバックを引数として指定する必要があります.
(*コールバック関数?後で呼び出される関数)
動きが多い場合は「callback地獄」を作ることができます.

非同期処理用のPromise

非同期で実行されるコードは、コールバック関数内でエラーを分岐処理する必要があります.

new Promise(function (resolve, reject) //생성자 함수로 Promise 객체를 생성하고 함수를 인자로 받음
            
const promise = new Promise(function (resolve, reject) {
  // 비동기 작업
  // 성공할 경우 resolve 함수 실행
  // 실패할 경우 reject 함수 실행
});

fromisオブジェクトには、将来の成功または失敗の結果値があります.

Pending:未確定結果

Fulfilled:成功状態

Rejected:失敗状態

promise.then(function (data) {
  console.log("Promise success!", data);
});
//then => fulfilled에서 실행

promise.catch(function (err) {
  console.log("Promise Failed!", err);
});
//catch => rejected에서 실행

returnvalue-将来的に成功または失敗の結果に関する承諾があるオブジェクトは、このPremissオブジェクトを使用して他のモジュールに返却または自由に渡すことができます.

エラー処理-errrrorは、同期コードのようなストリームで処理できる.

extension

読み取りと書き込みが容易な非同期コードをasync/awaitに変換

async function foo() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

foo();

関数の前のasync?
関数は常にprimisを返し、関数でawaitを使用できます!
フラミスの前で待ってるの?
JAvascriptはPrimis処理を待つ.
処理が完了すると、条件に従って以下の操作を行います.
エラー発生–例外の作成(エラーが発生した場所でthrow errorを呼び出すのと同じ)
エラー-インフラストラクチャオブジェクトのresult値を返します.

Event Loop

タスクが入るのを待って、タスクが入るのを待っています.処理するタスクがない場合は、JavaScriptのループに戻って寝ます.

console.log("start");

setTimeout(function foo () {
  console.log("foo!");
}, 0);

console.log("end");

foo関数foo 0秒をWeb API=>残余運転=>Web API=>Calback queue=>Callstackアイドル時にfoo関数を実行
*Call Stackが空かどうかを定期的にチェックし、Call Stackが空の場合は、Calback Queueの関数を順次実行します.

Web API

jsとともにブラウザで一般的な機能を使用できる追加リソース

DOM関連タスク(ドキュメント)

window関連タスク(settimeout、setInterval含む)

AJAX要求関連タスク(fetch、XMLHttpRequestを含む)
上記の部分は実際にはJavaScriptではなくWeb APIです.

Task Queue

タスクセット
JavaScriptエンジンは、タスクキュー内のタスクを順次処理し、新しいタスクの追加を待機します.