ひどうきプログラミング

10362 ワード

1.同期と非同期


1.動機


-JavaScriptは、同期実行に基づいています.すなわち、昇格順に順次実行される.

2.非同期


-特定の論理の実行が完了するのを待たずに残りのコードを実行します.
-非同期でアクションを実行する関数には、関数内のすべてのアクションを処理した後に実行する必要がある関数を含むパラメータコールバックが必要です.
-典型的な非同期関数:settimeout()
console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');
上記のコードの実行結果は次のとおりです.
1
3
2
こうして現れた.

3.コールバック関数


-コールバック関数は、データの準備が完了したときに必要な操作を実行し、後で渡された関数を呼び出すという概念です.
同期コールバック-同期実行可能
非同期コールバック-非同期運転
-ギャルバック地獄
$.get('url', function(response) {
	parseValue(response, function(id) {
		auth(id, function(result) {
			display(result, function(text) {
				console.log(text);
			});
		});
	});
});
上記のコードのようにコールバック関数を連続的に使用する場合に発生する問題.読みやすさが悪く、論理を変更するのは難しい.
PromiseとAsyncを使用してこの問題を解決します.

4. Promise


-JavaScriptのobjectでは、非同期操作が将来完了または失敗し、結果値を示す非同期操作を簡単に処理できます.
-非同期メソッドでは、同期メソッドのように値を返すことができます.
//-Producer vs Consumer
//必要な機能を実行して、対応するデータを作成します.
//必要なデータ
-PromiseのProducer
Promise.resolve():指定された値で履行された承諾オブジェクトを返します.
Promise.拒否():指定された理由で拒否された承諾オブジェクトを返します.
-Promiseの高利貸し:then,catch,finally
let myFirstPromise = new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve("Success!"); 
  }, 250);
});

myFirstPromise.then((successMessage) => {
  console.log("Yay! " + successMessage);
});
-プロセス処理フロー

5. async, await


-promiseをより簡潔で、より簡単で、より同期した構文に見せます.
-async:functionの前にasyncを付けると、関数は常にpromiseを返します.
-待機:promise処理が完了するまで待って、結果が返されます.async関数でのみ使用できます.promise.そして見ていると毒が効いて
async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; 
  alert(result);
}

6.エラー処理


-約束が拒否された時
async function f() {
  await Promise.reject(new Error("에러 발생!"));
}
-待機中にエラーが発生した時
async function f() {

  try {
    let response = await fetch('http://유효하지-않은-주소');
  } catch(err) {
    alert(err);
  }
}