Chapter[非同期]

11480 ワード
非同期 テキストリンク
非同期(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)); // 에러가 발생한 경우, 에러를 띄웁니다
    [伯俊]2583面積を求める
    [21/09/27]Junzzi Editorプロジェクトの設定-(4)scssの適用