script - promise


1. 👀Javascriptアクション


Javascriptは単一スレッド言語です.(プライマリスレッドとcallスタックから構成されます.)
実行環境(実行時)のヘルプで並列に実行します.
(WebAPI(dom, ajax, setTimeout..)Task Queue、Event Loopなどと一緒に作業します.

2.コールバックとは


コールバックはJavaScriptが非同期処理に使用するモードであり、従来のコールバックモードを使用して非同期処理を継続すると、コールバックhellに遭遇する可能性があります.コードの可読性が悪く、深刻な重複問題が発生しやすい.

3. Promise


非同期操作が終了した後に結果を知るオブジェクト.「基本情報」を使用して、비동기 메서드のように値동기 메서드を返します.これは、ダイヤルバックコールのため、ES 6が導入した別の非同期処理モードである.

1)承諾の作成

  • promisはpromiseコンストラクション関数によって作成されます.
  • パラメータとしてコールバック関数を受信して非同期動作を実行します.
  • // 프라미스 객체를 만듭니다. 
    // 인자로는 (resolve, reject) => {} 이런 excutor 실행자(혹은 실행 함수라고 불러요.)를 받아요.
    // 이 실행자는 비동기 작업이 끝나면 바로 두 가지 콜백 중 하나를 실행합니다.
    const promise = new Promise((resolve, reject) => {
    	if(...){
    		...
           // resolve: 작업이 성공한 경우 호출할 콜백
    	resolve("성공!"); 
      
    	}else{
    		...
       	// reject: 작업이 실패한 경우 호출할 콜백
    	reject("실패!"); 
    	}
    });

    2)承諾ステータス値

  • pendding:非同期処理を実行する前に(resolveおよびexecuteは呼び出されていません)
  • 完了:実行成功(reslove呼び出し)
  • rejected:実行失敗(reject呼び出し)
  • 解決済み:成功または失敗(解析または拒否を呼び出した)
  • 3)承諾後の処理方法

  • Promis実装の非同期関数は、Promisオブジェクトを返します.
  • プロセスによって実現される非同期関数を呼び出す場合、このプロセスオブジェクトの後続の処理方法を使用して非同期処理結果(成功または失敗)を処理する必要があります.
  • .そして(成功または失敗)
  • thenの最初のパラメータは成功時に実行され、2番目のパラメータは失敗時に実行されます
  • // 프라미스 생성
    let promise = new Promise((resolve, reject) => {
    	setTimeout(() => resolve("완료"), 1000);
    });
    let promise2 = new Promise((resolve, reject) => {
    	setTimeout(() => reject(new Error("오류")), 1000);
    });
    
    // resolve
    promise.then(result => {
    	console.log(result); // 완료가 콘솔에 찍힘
    }, error => {
    	console.log(error); // 실행되지 않음
    });
    
    // reject
    promise2.then(result => {
    	console.log(result); // 실행되지 않습니다.
    }, error => {
    	console.log(error); // Error: 오류가 찍힘
    });
    // catch
    promise2.catch((error) => console.log(error));

    4)承諾チェーン(計画)


    プロセスは、後続の処理方法をフィルタして複数のプロセスに接続できます.(この方法でコールバックヘルプを解決します)
    new Promise((resolve, reject) => {
    	setTimeout(() => resolve("promise 1"), 1000);
    }).then((result) => { // 후속 처리 메서드 하나를 쓰고,
    	console.log(result); // promise 1
    	return "promise 2";
    }).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
    	console.log(result);
    	return "promise 3";
    }).then(...);

    4. async, await


    1) async

  • 関数にasyncを追加して有効
  • 常に「基本情報」を返します(「基本情報」の値でなくても「基本情報」を返さなければなりません)
  • // async는 function 앞에 써줍니다.
    async function myFunc() {
    	return "프라미스를 반환"; 
    }
    
    myFunc().then(result => {console.log(result)}); // 콘솔로 확인

    2) await

  • asyncのテーブルは、asyncなしでは使用できません.
  • await promisは、処理が完了する前にパッケージ化し、その後の結果
  • を返します.
    async function myFunc(){
    	let promise = new Promise((resolve, reject) => {
    		setTimeout(() => resolve("완료"), 1000);
    	});
    
        console.log(promise);
    
    let result = await promise; // 여기서 기다리자 하고 신호를 줍니다.
    
     console.log(promise);
    
     console.log(result); // then(후처리 함수)를 쓰지 않았는데도, 
    //  1초 후에 콘솔에 찍힙니다.
    }
    「≪待機|Wait|emdw≫」に遭遇すると、実行は停止し、プロセスの処理が完了した後も実行を続行します.

    の最後の部分


    promiseとaysncの概念を授業内容にまとめた.後で、Deep Dave Bookと学習内容に基づいて、promise、async、await部分をGenerator関数と小さなかわいい関数に追加してまとめます.