JS中級Promise

▼▼▼Promiseの使い道と基本的な使い方

  var a = new Promise();

  a.then(function(){

  }).catch(function(){

  })

コールバック関数の設計モードが気に入らない場合は、以下のPromise設計モードを使用します.

Promise構文で生成されたオブジェクトに変数オブジェクトが出力され、Promisのコードの実行が完了すると、関数のコードでスライドします.実行に失敗した場合はcatch()関数のコードを実行します.

Promiseには、次のような利点があります.

コールバック関数とは異なり、コードが順次実行されるとコードは長くなりません.

コールバック関数は、不可能な「失敗した場合は特定のコードを実行してください~」コードを記述することができます.

  var a = new Promise(function(resolve,reject){
  	success();
  });

  a.then(function(){
	//성공시 실행할 내용
  }).catch(function(){
	//실패시 실행할 내용
  })

のように、Promiseにコールバック関数を追加すると、成功/失敗を判定できます.

1番目のパラメータ

resolve()を関数形式で記入すると、2番目のパラメータ、すなわち成功判定、拒否()が関数形式で記入され、判定に失敗する.△resolveとacceptはそう書く必要はありません.これは慣例です.

▶▼▼承諾の実際の使用例1

var a = new Promise(function(resolve,reject){
 var hardwork = 1 + 1;
  resolve();
})

a.then(function(){
	console.log('calculation success')
}).catch(function(){

});

Promise()には,困難な数学演算を行う機能が追加されている.次に、この演算が完了したら、thenのコードを実行するコードを追加します.

  var a = new Promise(function(resolve,reject){
   var hardwork = 1 + 1;
    reject();
  })

  a.then(function(){
     
  }).catch(function(){
	 console.log('calculation failed')
  });

discrete()という関数を実行すると、失敗と判定されます.次にcatch()内のコードを実行します.失敗した場合は、通常のコールバック関数の設計よりも直感的で役に立ちます.

  var a = new Promise(function(resolve,reject){
   var hardwork = 1 + 1;
    resolve(hardwork);
  })

  a.then(function(outcome){
	 console.log('calculation success:' + outcome)     
  }).catch(function(){

  });

演算結果を利用したい場合は、関数で結リンゴ値をパラメータとして使用できます.

▶▼▼承諾の実際の使用例2

  var a = new Promise(function(resolve,reject){
	setTimeout(function(){
        resolve();
    }, 1000)
  })

  a.then(function(outcome){
	 console.log('success')     
  }).catch(function(){
	console.log('failed')
  }).finally('good');//성공 여부에 관계없이 무조건 실행시킬 코드

settimeoutのような関数を順次実行させるには、Promiseの例を使用します.

▶▼▼約束のいくつかの特徴

/* 

성공 / 실패 판정 전 -> pending 상태
성공 후 -> fulfilled 상태
실패 후 -> rejected 상태

*/ 

  let a = new Promise(function(resolve, reject){

    setTimeout(function(){
      console.log('promise');
      console.log(a)// pending

      resolve();//성공
      reject();//실패
    })


  }, 1000);

  a.then(function(){
    console.log('resolved')//fulfilled
  }).catch(function(){
    console.log('reject')//rejected
  }).finally(function(){
    console.log('finally')//fulfilled
  })

Promiseオブジェクトには3つのステータスがあり、ブラウザコンソールウィンドウでコードを実行することで、時点に応じてオブジェクトのステータスを区別できます.

  let a = new Promise(function(resolve, reject){

    setTimeout(function(){
      오래걸리는연산(); 
      console.log(a)// pending

      resolve();//성공
      reject();//실패
    })


  }, 1000);

  a.then(function(){
    console.log('resolved')//fulfilled
  }).catch(function(){
    console.log('reject')//rejected
  }).finally(function(){
    console.log('finally')//fulfilled
  })

Promiseで10秒以上かかるタスクを実行すると、ブラウザは10秒停止します.

は簡単にPromiseを使えば自動的に同期処理ができるわけではないことを覚えておいてください.△これは設計モードにすぎず、符号化をより直感的で簡潔にすることができる.

▶️ Promise chaining

// jquery 적용시
var promise1 = new Promise(function(resolve, reject) {
    $.get('https://codingapple1.github.io/hello.txt').done(function(result){
      resolve(result)
    });
});

프로미스.then(function(result) {
  console.log(result);

  var promise2 = new Promise(function(resolve, reject) {
    $.get('https://codingapple1.github.io/hello2.txt').done(function(result){
      resolve(result)
    })
  });

  return promise2;

}).then(function(result) {
    console.log(result);
})

は、その後、2、3個以上連続して順次使用することができる.

セグメントthen関数はnew Promise()から生成されたオブジェクトにのみ貼り付けられます.

ですので、複数のthenを貼り付けてthenでnew Promise()を返すという動作が可能です.(再呼び出し関数)

その他のPromise資料については、当サイトの資料を参照してください.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise