同期/非同期

同期、非同期バー

Synchronous basically means that you can only execute one thing at a time. Asynchronous means that you can execute multiple things at a time and you don't have to finish executing the current thing in order to move on to next one.

デフォルトでは、

同期は一度に1つしか実行できません.非同期は、現在のタスクを完了することなく、複数のタスクを一度に実行できることを意味します.

YouTubeのビデオロード中に、非同期リクエストが適用されたため、他のリンクをクリックできます.

webの内部で、次の操作を行います.node eventloofで詳しく勉強します.
joshua1988.github.io/web-development/javascript/promise-for-beginners/

callback

// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
let makeCoffie = (coffieOper) =>{
  let ranTime = Math.floor(Math.random() * 100)+1
  //주어진 시간 후에 다음을 실행해라
  setTimeout(() => {
    console.log(coffieOper+" "+ranTime+"ms초");
  }, 
  ranTime
  )
}

//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
let coffieOrder = () => {
	makeCoffie("커피콩 그라인딩");
    makeCoffie("스팀추출");
    makeCoffie("커피 완성");
}

//작업은 비동기로 이루어지나 작업 시간이 먼저 끝나는 업무가 먼저 출력되는 문제가 생겼다.
//동기화(setTimeout없이) 실행하면 세 작업은 작성 순서대로 출력되었을 것이다.(그라인딩, 추출, 완성)
coffieOrder()
커피 완성 59ms초
커피콩 그라인딩 73ms초
스팀추출 74ms초

coffieOrder()
커피 완성 8ms초
커피콩 그라인딩 65ms초
스팀추출 62ms초

coffieOrder()
스팀추출 24ms초
커피콩 그라인딩 37ms초
커피 완성 72ms

settimeoutは、実行が完了した順にコールバックキューに入り、順次出力される.

で非同期でトランザクションを実行しても、コールバックを使用して出力を処理して、順番に実行できます.

業務が終わったら電話してください.非同期が終わったら

と教えてください.

// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
// callback함수 인자를 추가해서 setTimeout이 완료되면 callback함수가 호출되도록 한다.
let makeCoffie = (coffieOper, callback) =>{
  let ranTime = Math.floor(Math.random() * 100)+1
  //주어진 시간 후에 다음을 실행해라
  setTimeout(() => {
    console.log(coffieOper+" "+ranTime+"ms초");
    //출력 다음에 callback 함수 실행
    callback();
  }, 
  ranTime
  )
}

//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
//callback으로 출력 순서를 지정해줄 수 있다.
let coffieOrder = () => {
  makeCoffie("커피콩 그라인딩", () =>{
    makeCoffie("스팀추출", () =>{
      makeCoffie("커피 완성", ()=>{})
    })
  });
}

//출력 순서가 작성 순서대로 진행된다.
coffieOrder()
undefined
커피콩 그라인딩 13ms초
스팀추출 36ms초
커피 완성 92ms초

coffieOrder()
undefined
커피콩 그라인딩 21ms초
스팀추출 42ms초
커피 완성 11ms초

coffieOrder()
undefined
커피콩 그라인딩 26ms초
스팀추출 96ms초
커피 완성 61ms초

callbackを使用して出力順序を調整できますが、トランザクションが増えるとcallbackを使用するとコードが複雑になります.

promise

promiseは一種です.new promissionを使用してインスタンスを作成できます.

承諾の方法には、決意()と拒否()があります.

コールバック関数による新しい承諾の生成は受け入れられません.

A Promise is a proxy for a value not necessarily known when the promise is created.
It allows you to associate handlers with an asynchronous action's eventual success value or failure reason.
This lets asynchronous methods return values like synchronous methods.
instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
Promiseを作成するとき、Promiseは未知の値のエージェントです.
これにより、プロセッサを非同期操作の最終的な成功値または失敗原因に関連付けることができます.
これにより、非同期メソッドは同期メソッドと同じ値を返すことができます.
すなわち、非同期メソッドは、最終値を直ちに返すのではなく、将来のある時点で値を提供する承諾を返す.
The Promise.resolve() method returns a Promise object that is resolved with a given value.
If the value is a promise, that promise is returned;
if the value is a thenable (i.e. has a "then"method), the returned promise will "follow"that thenable, adopting its eventual state;
otherwise the returned promise will be fulfilled with the value.
This function flattens nested layers of promise-like objects (e.g. a promise that resolves to a promise that resolves to something) into a single layer.
Promise.resolve()メソッドは、指定した値で解析されたPromiseオブジェクトを返します.
valueがpromiseの場合、promiseは戻ります.
valueが実行可能(すなわちthen()メソッド)である場合、return promiseはそのthen()の最終状態を採用する.
そうでなければ、リターンの承諾はその価値の実現に伴います.
この関数はpromiseのようなオブジェクトのオーバーラップレイヤを単一のレイヤにマージします.(e.g.ある問題を解決する約束)

Promise.resolve('Success').then(function(value) {
  console.log(value); // "Success"
}, function(value) {
  // not called
});
===================================================================================
var p = Promise.resolve([1,2,3]);
p.then(function(v) {
  console.log(v[0]); // 1
});
===================================================================================
var original = Promise.resolve(33);
var cast = Promise.resolve(original);
cast.then(function(value) {
  console.log('value: ' + value);// value: 33
});
console.log('original === cast ? ' + (original === cast)); //true

original === cast ? true 이게 먼저 출력된다
value: 33

cast
Promise {<fulfilled>: 33}
original
Promise {<fulfilled>: 33}
===================================================================================

A Promise is in one of these states:
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation was completed successfully.
rejected: meaning that the operation failed.
承諾の3つの状態
保留ステータス:初期ステータス、未履行または却下
実行:タスクが正常に完了しました
拒否:操作が失敗したことを示します

// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
// new promise 클래스를 리턴한다.
let makeCoffie = (coffieOper) =>{
  return new Promise((resolve, reject) => {
    let ranTime = Math.floor(Math.random() * 100)+1
    //주어진 시간 후에 다음을 실행해라
    setTimeout(() => {   
      //정상적으로 실행되면 resolve()호출
      resolve(coffieOper+" "+ranTime+"ms초");
    }, 
    ranTime
    )
  })
}

//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
//callback으로 출력 순서를 지정해줄 수 있다.
let coffieOrder = () => {
  makeCoffie("커피콩 그라인딩")
    .then((data)=> {
      console.log(data)
      return makeCoffie("스팀추출")
    })
    .then((data) =>{
      console.log(data)
      return makeCoffie("커피 완성")
    })
    .then((data) =>{
      console.log(data)
    })
}
coffieOrder()
undefined
커피콩 그라인딩 95ms초
스팀추출 72ms초
커피 완성 84ms초
coffieOrder()
undefined
커피콩 그라인딩 34ms초
스팀추출 56ms초
커피 완성 7ms초
coffieOrder()
undefined
커피콩 그라인딩 38ms초
스팀추출 26ms초
커피 완성 45ms초

return new promise(callback)のcallbackはパラメータ解析と拒否のみを受け入れます.

上のコードには拒否可能な要素がないため、関連コード(エラー処理)もありません.

拒絶要因があれば.そして最後の部分でcatch()関数は入るはずです.
.thenは、前の関数の実行が終了した後に実行される関数で、内部はcallback形式です.

コールバックに入るパラメータは.その後、前に実行されて返される値(resolve()の値がthenのパラメータとなる).

パラメータ名を任意に指定し、then()のコールバック内で追加操作を行うことができます.

someMethod()
  .then((returnVal) => {
	return returnVal+"추가작업";
  }).then((addedReturnVal) => {
      return addedReturnVal+"또 작업 추가";
    })

Async & await

awaitを使用して

promise関数を使用して非同期関数を同期プログラムに書くことができます.

The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.
If the Promise is rejected, the await expression throws the rejected value.
await式は、非同期関数の実行を一時停止し、promise(完了または拒否)が解決されるまで、実行後に非同期関数の実行を再開します.再開するとawait式の値が実装の承諾値になります.
Promiseが拒否されると、式はrejected値を放出します.

// 커피를 만드는 함수. setTimeout 안 console.log()가 출력되며
// 출력 시간은 랜덤하게 실행된다.
// new promise 클래스를 리턴한다.
let makeCoffie = (coffieOper) =>{
  return new Promise((resolve, reject) => {
    let ranTime = Math.floor(Math.random() * 100)+1
    //주어진 시간 후에 다음을 실행해라
    setTimeout(() => {   
      //정상적으로 실행되면 resolve()호출
      resolve(coffieOper+" "+ranTime+"ms초");
    }, 
    ranTime
    )
  })
}

//커피 주문 함수, 함수가 실행되면 makeCoffie() 3개가 실행된다.
//callback으로 출력 순서를 지정해줄 수 있다.
//callback 앞에 async를 붙인 다음 내부에서 함수를 동기화 함수 작성하듯 작성한다.
let coffieOrder = async () => {
  let a = await makeCoffie("커피콩 그라인딩")
  console.log(a)
  let b = await makeCoffie("스팀추출")
  console.log(b)
  let c = await makeCoffie("커피 완성")
  console.log(c)
}

coffieOrder()
Promise {<pending>}
커피콩 그라인딩 70ms초
스팀추출 97ms초
커피 완성 79ms초

coffieOrder()
Promise {<pending>}
커피콩 그라인딩 49ms초
스팀추출 68ms초
커피 완성 86ms초

coffieOrder()
Promise {<pending>}
커피콩 그라인딩 47ms초
스팀추출 20ms초
커피 완성 93ms초