Chapter[非同期]

非同期(async):並列および同期処理
同期(sync):シーケンスまたはシリアル処理

ex)
喫茶店でコーヒーを注文するとき、前の人がコーヒーを注文して、すべてのコーヒーを提供したら、次の注文を受け取ります동기적 처리逆に、すべての人の注文を同時に受け取って、コーヒーが完成した後にコーヒーを提供したら、비동기적 처리

[コールバック関数]

コールバック関数は、パラメータとして特定の関数に渡される関数で、関数内の特定の時点で再呼び出される関数です.

欠点は、コールバック関数が繰り返され、コードのインデントが深まる콜백지옥である.

[ Promise ]

Promiseは、非同期実行操作の結果(成功または失敗)を示すオブジェクトです.

3つの状態(States)

保留(待機):未履行または拒否の初期状態

完了(実行済み):演算が正常に完了しました

拒否(失敗):演算に失敗しました

Promiseの使い方

const promise = new Promise((resolve, reject) => {
    // 시간이 걸리는 것들, 네트워크 통신, 파일 읽어오기 (비동기적 처리)
    // 성공시 resolve 콜백함수 호출 해서 전달
    // 실패시 reject(new Error(‘에러 이유’))
    // 꼭 resolve, reject 이용해서 완료
})

Promiseの特徴

new Promise(...)|この操作を実行すると、この操作に割り当てられた非同期操作が直ちに開始される.

Promiseメソッドフィルタリング(method chain)

promise //
      .then((value) => {
	// promise가 정상적으로 수행이 되면 resolve 콜백함수를 통해 전달한 값이 나온다.
	// 값을 바로 전달 할 수 있고, promise를 전달 할 수 있다.
       })

       .catch(error => {
	// promise에 에러가 발생 했을 때 처리할 콜백함수 등록
       })

       .finally(() => {
	// 성공하든 실패하든 상관없이 어떤 기능을 마지막으로 수행하고 싶을 때 사용
       })

Promise.all

複数の非同期動作を同時に待機

複数のPromiseを扱う

配列内のすべての値の実行(または最初の拒否)を待機します.

Function pickAllFruits(){   
   return Promise.all([getApple(), getBanana()])
   .then((다 받아진게 들어온다)join( ‘ + ’ ));
}

Promise.race

アレイに渡された承諾で、最初に返された値は値です.

Function pickAllFruits(){   
    return Promise.race([getApple(), getBanana()])
}

[ async / await ]

asyncキーワードを関数に書き込む前に、コードブロックは自動的にpromiseに変換され、Promise 객체に戻ります.

async関数をPromiseを返す関数とする.

awaitその名の通り「待つ」です.

async関数でのみ使用できます.

構文await [[Promise 객체]]このオプションを使用

Promiseの完了を待ちます.

Promise解析の値を出します.

却下が発生すると例外が発生します.try-catch 구문を使用してこの例外処理を行います.

const funcAsync = async () => {
  try {
    await delaySecond(3);
    return true
  } catch (error) {
    console.log(error);
    return false
  }
};

async/await

の使用方法

async function pickFruits() {
    const applePromise = getApple()
    const bananaPromise = getBanana()
    // promise를 만들면 바로 실행되기 때문에 병렬적으로 동시에 실행
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`
}

[ fetch API ]

fetch() 함수1番目のパラメータURL、2番目のパラメータでオプションオブジェクトを受信し、Promiseタイプのオブジェクトを返します.返されたオブジェクトは、API呼び出しが成功したときの応答オブジェクトを解析し、失敗したときの例外オブジェクトを拒否します.

fetch(url)
  .then((response) => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then((json) => console.log(json)) // 콘솔에 json을 출력합니다
  .catch((error) => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다