[JavaScript非同期処理]コールバック関数とPromiseの基本的な使い方

非同期処理とは?

特定の論理の実行が完了するのを待たずに、残りのコードを実行します.

同期vs非同期

どうきしょり
前の処理が完了したら、次の処理を行います.

の実行順序を保証します.

前の順序がどれだけ時間がかかるかにかかわらず、待機後に実行され、効率的ではありません.非同期処理
前のステップを待たずに、次のコード実行を実行します.
すぐに答えが出せなければ、ずっと待つことはありません.

の実行順序は保証できません.

JavaScriptの非同期処理

JavaScriptは同期言語です.
吊り下げてコードを順次実行します.hoisting : 변수, 함수 선언이 자동적으로 제일 위로 올라가는 현상

JavaScriptに非同期処理が必要なのはなぜですか?

ネット上では、資料が順番に来ていると効率的ではありません.
画面上でサーバにデータを要求すると、サーバがいつその要求に応答するか分からない場合は、応答を受信する前に他のコードは実行されません.
ユーザはアクションを行うたびに待機するため、可用性が悪い.
JavaScriptの非同期処理には3つの方法があります.

1.コールバック関数の利用

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

シンクロコールバック

順次実行します.

function printImmediately(print) {
  print();
}

console.log(1),
printImmediately(() => console.log(2));
console.log(3)

// 1, 2, 3

ひどうきコールバック

非順序条件で実行します.
関数を登録するだけ 何があったの?
ある時点に達すると、システムが呼び出されます.

サーバ通信API、データ受信時に呼び出されるコールバック関数、

settimeout APIを使用する場合、一定時間後に呼び出されるコールバック関数

settimeout()の使用例

function printWithDelay(callback, delayTime) {
  setTimeout(callback, delayTime)
}

console.log(1)
printWithDelay(() => console.log(2), 2000);
console.log(3)
printWithDelay(() => console.log(4), 1000);

// 1, 3, 4, 2

callback地獄とは何ですか?

コールバック関数の関数実行文のコールバック関数の関数実行文のコールバック関数...
Webサービスを開発する際には、サーバから受信したデータから画面に表示されるエンコーディング、ユーザ認証までの複数のプロセスを処理する必要がある場合があり、これらすべてのプロセスに非同期処理が必要な場合は、コールバック中にサイレントコールバックの形式で符号化を継続する可能性があります.

は毒性が低い.

のデバッグとメンテナンスが困難です.

a(
   () => {
          b(1,2,()=>{
            c(4,5,()=>{
            	d()
            })
          })
    },
    6,
    7
)

Promiseは,コールバック関数を用いて非同期処理を行う場合に発生する可能性のあるコールバック地獄のような問題を解決するために用いられる.

Promise

JAvascripに組み込まれている非同期オブジェクト.
主にサーバから受信したデータを画面に表示するために使用されます.
APIを使用して、サーバからデータを要求および受信します.
非同期処理を行うためには、データを受信する前に、データを受信したように画面に表示しようとするとエラーが発生し、問題を解決する方法の一つです.

2つのキー

ステータスの理解
promiseは非同期処理の3つのプロセスを実行する.

実行中か→

を保留

が成功するかどうか→

を完了する

失敗→

拒否

生産者と消費者の違いを理解します.
生産者:必要なデータを提供するオブジェクト.(=== promise)
consumer:提供されたデータのオブジェクトを使用します.

1. producer

承諾の作成

新しいPromise呼び出し時待機状態

const promise = new Promise()

promise(function(resolve, reject) {
  // ...
});

Promiseにexecutorというコールバック関数を与える必要があります.
executerはまた、resolve、executeの2つのコールバック関数を渡す必要があります.
resolve:機能が正常に動作しているときに呼び出される関数.
拒否:機能の実行中に問題が発生したときに呼び出される関数.

ajax通信APIの使用例

解析()コール時フルステータス

呼び出し拒否()失敗状態

function getData() {
  
  // new Promise() 추가
  return new Promise((resolve, reject) => {
    
    // 서버에서 데이터를 받아오는 API실행
    $.get('url 주소/products/1', function(response) {
      
      // 데이터(response)를 받으면 resolve() 호출
      if (response) {
      // 받은 데이터(response)를 그대로 전달
        resolve(response);
      }
      
      // 실패 시 reject() 호출 - 오류 메세지 전달
      reject(new Error("Request is failed"));
    });
  });
}

});

2. Consumers

promiseの使用

promiseの実行が完了したときに呼び出される関数.

then()
Promiseが正常に動作してresolveが呼び出された場合は、この関数

を実行します.

// resolve(response)의 결과 값 data를 resolvedData로 받음
getData().then((resolvedData) => {
  console.log(resolvedData); // 받은 데이터를 인자로 받아 그대로 출력.
});

catch()
エラーが発生して拒否を呼び出す場合は、この関数

を実行します.

getData()
  .then((resolvedData) => {
  console.log(resolvedData); 
})

// reject()의 결과 값 Error객체를 err에 받아서 오류메세지 출력
  .catch((err) => {
  console.log(err); // Error: Request is failed
});

finally()
成功するにせよ失敗するにせよ、最後には必ず

を実行しなければならない.

getData()
  .then((resolvedData) => {
  console.log(resolvedData); 
})
  .catch((err) => {
  console.log(err); 
});
  .finally(()=>{
  console.log("finally"); 
})

リファレンス
https://blog.metafor.kr/164
https://deftkang.tistory.com/20
https://www.youtube.com/watch?
ドリームコード