js) Promise


  • プロセスは、JavaScript非同期処理のためのオブジェクトです.
    -(非同期処理とは、JavaScriptの特性であり、特定のコードの実行が完了するのを待つのではなく、次のコードを先に実行する)
  • .
  • api通信が完了したら、次の関数に移動できますか?
  • きほんコード

  • コールバック関数を使用するコード
  • //ajax 통신 api를 이용하여 지정된 url의 1번상품 데이터를 받아오는 코드
    function getData(callbackFunc){
      $.get('url/products/1', function(response) {
        callbackFunc(response); // 서버에서 받은 response값을 callback 함수에 넘겨줌
      });
    }
    コード
  • Promisを採用
    function getData(callback){
      // new Promise() 추가
      return new Promise(function(resolve, reject) {
        $.get('url/products/1', function(response){
          // 데이터를 받으면 resolve() 호출
          resolve(response);
        })
      })
    }
    
    //getData() 의 실행이 끝나면 호출되는 then()
    getData().then(function(tableData) {
      //resolve()의 결과값이 여기로 전달
      console.log(tableData); // $.get() 의 response 값이 tableData에 전달됨
    });

    3つの状態

  • プロセスはnewPromise()によって生成され、終了し、3つの状態を有する.
  • 保留中(保留中)

  • の新しいPromise()メソッドを呼び出すと待機状態になります.
  • new Promise();
    // new Promise() 메서드 호출시 콜백함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
    new Promise(function(resolve, reject){
    })

    Fulfilled(実行)

  • コールバック関数のパラメータ解析が実行されると、完了します.
  • new Promise(function(resolve, reject){
      resolve();
    })
  • の実行状態に達した場合、以下のthen()を用いて結果値を得ることができる.
  • function getData(){
      return new Promise(function(resolve, reject) {
        var data = 100;
        resolve(data);
      });
    }
    // resolve()의 결과 값 data를 resolvedData로 받음
    getData().then(function(resolvedData){
      console.log(resolvedData); //100
    })

    Rejected(失敗)


    呼び出し
  • が拒否されると失敗します(拒否).
  • new Promise(function(resolve, reject){
      reject();
    });
  • が失敗した場合、失敗した場合の結果値catch()が得られます.
  • function getData(){
      return new Promise(function(resolve, reject) {
        reject(new Error("Request is failed"));
      });
    }
    
    // reject()의 결과 값 Error를 err에 받음
    getData().then().catch(function(err){
      console.log(err);
    })

    Premisコード例(1)

    function getData() {
      return new Promise(function(resolve, reject) {
        $.get('url/products/1', function(response) {
          if (response) {
            resolve(response);
          }
          reject(new Error("Request is failed"));
        });
      });
    }
    
    // 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
    getData().then(function(data) {
      console.log(data); // response 값 출력
    }).catch(function(err) {
      console.error(err); // Error 출력
    });
  • が正しい応答を受信した場合、resolve()メソッドを呼び出す->then()
  • 応答がない場合は、()メソッド呼び出しを拒否します->catch()

    Premisコード例(2)

  • setTimeout() API
  • new Promise(function(resolve, reject){
      setTimeout(function() {
        resolve(1); // 여기서 1 값을 가지고 then으로
      }, 2000);
    })
    .then(function(result) {
      console.log(result); // 1
      return result + 10;
    })
    .then(function(result) {
      console.log(result); // 11
      return result + 20;
    })
    .then(function(result) {
      console.log(result); // 31
    });
    ソース:https://joshua1988.github.io/web-development/javascript/promise-for-beginners/