ES6-約束

Promise構文

promiseに関連する構文については、以下で説明します。 p 約束のオブジェクトです、 resolve promiseが正常に実行されたときに呼び出される関数であり、 reject promiseでエラーが発生したときに呼び出す必要のある関数です。

let p = new Promise(function(resolve,reject){
   let workDone = true; // some time consuming work
      if(workDone){
      //invoke resolve function passed
      
	  resolve('success promise completed')
   }
   else{
      reject('ERROR , work could not be completed')
   }
})

例

以下の例は関数を示しています add_positivenos_async()これは2つの数値を非同期に追加します。正の値が渡されると、promiseは解決されます。負の値が渡された場合、promiseは拒否されます。

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed') 
         })
         return p;
   }

   add_positivenos_async(10, 20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   add_positivenos_async(-10, -20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   function errorHandler(err) {
      console.log('Handling error', err)
   }
   function successHandler(result) {
      console.log('Handling success', result)
   }

   console.log('end')
</script>

上記のコードの出力は以下のようになります-

end
Handling success 30
Handling error NOT_Postive_Number_Passed

約束の連鎖

Promises chaining のシーケンスがある場合に使用できます asynchronous tasks次々と行われる。約束が別の約束の結果に依存する場合、約束は連鎖します。これを以下の例に示します

例

以下の例では、 add_positivenos_async() function2つの数値を非同期に追加し、負の値が渡された場合は拒否します。現在の非同期関数呼び出しの結果は、パラメーターとして後続の関数呼び出しに渡されます。それぞれに注意してくださいthen() メソッドにはreturnステートメントがあります。

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }

   add_positivenos_async(10,20)
   .then(function(result){
      console.log("first result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
   console.log("second result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
      console.log("third result",result)
   })

   console.log('end')
</script>

上記のコードの出力は以下のようになります-

end
first result 30
second result 60
third result 120

promiseオブジェクトの一般的に使用されるいくつかのメソッドについて、以下で詳しく説明します。

promise.all（）

この方法は、複数のプロミスの結果を集計するのに役立ちます。

構文

の構文 promise.all() 方法は以下に記載されています、ここで、 iterable反復可能なオブジェクトです。例：アレイ。

Promise.all(iterable);

例

以下の例では、非同期操作の配列を実行します [add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)]。すべての操作が完了すると、約束は完全に解決されます。

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }
   //Promise.all(iterable)

Promise.all([add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)])
   .then(function(resolveValue){
      console.log(resolveValue[0])
      console.log(resolveValue[1])
      console.log(resolveValue[2])
      console.log('all add operations done')
   })
   .catch(function(err){
      console.log('Error',err)
   })
   console.log('end')
</script>

上記のコードの出力は次のようになります-

end
30
70
110
all add operations done

promise.race（）

この関数は、promiseの配列を受け取り、解決された最初のpromiseを返します。

構文

の構文 promise.race()関数については以下で説明します。ここで、iterableは反復可能なオブジェクトです。例：アレイ。

Promise.race(iterable)

例

以下の例は配列を取ります [add_positivenos_async(10,20),add_positivenos_async(30,40)] 非同期操作の。

いずれかの追加操作が完了すると、Promiseは解決されます。promiseは、他の非同期操作が完了するのを待ちません。

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }

   //Promise.race(iterable)
   Promise.race([add_positivenos_async(10,20),add_positivenos_async(30,40)])
   .then(function(resolveValue){
      console.log('one of them is done')
      console.log(resolveValue)
   }).catch(function(err){
      console.log("Error",err)
   })

   console.log('end')
</script>

上記のコードの出力は次のようになります-

end
one of them is done
30

PromisesJavaScriptで非同期プログラミングを実装するためのクリーンな方法です（ES6の新機能）。promiseの前は、コールバックを使用して非同期プログラミングを実装していました。コールバックを使用して、非同期プログラミングとは何か、およびその実装を理解することから始めましょう。

コールバックを理解する

関数をパラメータとして別の関数に渡すことができます。このメカニズムは、Callback。コールバックはイベントで役立ちます。

次の例は、この概念をよりよく理解するのに役立ちます。

<script>   
   function notifyAll(fnSms, fnEmail) {   
      console.log('starting notification process');   
      fnSms();   
      fnEmail();   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   }, 
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); 
   //executes last or blocked by other methods   
</script>

の中に notifyAll()上記の方法では、通知はSMSの送信と電子メールの送信によって行われます。したがって、notifyAllメソッドの呼び出し元は、2つの関数をパラメーターとして渡す必要があります。各機能は、SMSの送信や電子メールの送信などの単一の責任を負います。

上記のコードが正常に実行されると、次の出力が表示されます。

starting notification process 
Sms send .. 
Email send .. 
End of script

上記のコードでは、関数呼び出しは同期的です。これは、UIスレッドが通知プロセス全体を完了するのを待機していることを意味します。同期通話はブロッキング通話になります。ここで、非ブロッキング呼び出しまたは非同期呼び出しについて理解しましょう。

AsyncCallbackを理解する

上記の例を考えてみましょう。

スクリプトを有効にするには、notifyAll（）メソッドへの非同期または非ブロッキング呼び出しを実行します。を使用しますsetTimeout()JavaScriptのメソッド。このメソッドはデフォルトで非同期です。

setTimeout（）メソッドは2つのパラメーターを取ります-

  • コールバック関数。

  • メソッドが呼び出されるまでの秒数。

この場合、通知プロセスはタイムアウトでラップされています。したがって、コードで設定された2秒の遅延がかかります。notifyAll（）が呼び出され、メインスレッドは他のメソッドの実行と同じように進みます。したがって、通知プロセスはメインのJavaScriptスレッドをブロックしません。

<script>   
   function notifyAll(fnSms, fnEmail) {   
      setTimeout(function() {   
         console.log('starting notification process');   
         fnSms();   
         fnEmail();   
      }, 2000);   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   },  
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); //executes first or not blocked by others   
</script>

上記のコードが正常に実行されると、次の出力が表示されます。

End of script 
starting notification process 
Sms send .. 
Email send ..

複数のコールバックの場合、コードは恐ろしく見えます。

<script>   
   setTimeout(function() {   
      console.log("one");   
      setTimeout(function() {   
         console.log("two");   
         setTimeout(function() {   
            console.log("three");   
         }, 1000);   
      }, 1000);   
   }, 1000);   
</script>

ES6は、promiseの概念を導入することであなたを助けます。Promiseは「継続イベント」であり、複数の非同期操作をよりクリーンなコードスタイルで一緒に実行するのに役立ちます。

例

例を挙げてこれを理解しましょう。以下はその構文です。

var promise = new Promise(function(resolve , reject) {    
   // do a thing, possibly async , then..  
   if(/*everthing turned out fine */)    resolve("stuff worked");  
   else     
   reject(Error("It broke"));  
});  
return promise;
// Give this to someone

promiseを実装するための最初のステップは、promiseを使用するメソッドを作成することです。この例では、getSum()メソッドは非同期です。つまり、その操作が他のメソッドの実行をブロックしてはなりません。この操作が完了するとすぐに、後で発信者に通知されます。

次の例（ステップ1）は、Promiseオブジェクト 'varpromise'を宣言しています。Promiseコンストラクターは、作業を正常に完了するために最初に関数を実行し、エラーが発生した場合に別の関数を実行します。

promiseは、resolveコールバックを使用して計算結果を返します。つまり、n1 + n2です。

Step 1 − resolve（n1 + n2）;

getSum（）でエラーまたは予期しない条件が発生した場合、Promiseのrejectコールバックメソッドが呼び出され、エラー情報が呼び出し元に渡されます。

Step 2 − react（Error（ "ネガはサポートされていません"））;

メソッドの実装は、次のコード（ステップ1）に示されています。

function getSum(n1, n2) {   
   varisAnyNegative = function() {   
      return n1 < 0 || n2 < 0;   
   }   
   var promise = new Promise(function(resolve, reject) {   
      if (isAnyNegative()) {   
         reject(Error("Negatives not supported"));   
      }   
      resolve(n1 + n2)
   });   
   return promise;   
}

2番目のステップでは、呼び出し元の実装について詳しく説明します（ステップ2）。

呼び出し元は「then」メソッドを使用する必要があります。このメソッドは、2つのコールバックメソッドを使用します。1つ目は成功、2つ目は失敗です。次のコードに示すように、各メソッドは1つのパラメーターを取ります。

getSum(5, 6)   
.then(function (result) {   
   console.log(result);   
},   
function (error) {   
   console.log(error);   
});

上記のコードが正常に実行されると、次の出力が表示されます。

11

getSum（）の戻り値の型はPromiseであるため、実際には複数の 'then'ステートメントを持つことができます。最初の「then」にはreturnステートメントがあります。

getSum(5, 6)   
.then(function(result) {   
   console.log(result);   
   returngetSum(10, 20); 
   // this returns another promise   
},   
function(error) {   
   console.log(error);   
})   
.then(function(result) {   
   console.log(result);   
}, 
function(error) {   
   console.log(error);
});

上記のコードが正常に実行されると、次の出力が表示されます。

11
30

次の例では、getSum（）メソッドを使用して3つのthen（）呼び出しを発行します。

<script>   
   function getSum(n1, n2) {   
      varisAnyNegative = function() {   
         return n1 < 0 || n2 < 0;   
      }   
      var promise = new Promise(function(resolve, reject) {   
         if (isAnyNegative()) {   
            reject(Error("Negatives not supported"));   
         }   
         resolve(n1 + n2);   
      });   
      return promise;   
   }   
   getSum(5, 6)   
   .then(function(result) {   
      console.log(result);   
      returngetSum(10, 20); 
      //this returns another Promise   
   },   
   function(error) {   
      console.log(error);   
   })
   .then(function(result) {   
      console.log(result);   
      returngetSum(30, 40); 
      //this returns another Promise   
   }, 
   function(error) {   
      console.log(error);   
   })   
   .then(function(result) {   
      console.log(result);   
   }, 
   function(error) {         
      console.log(error);   
   });   
   console.log("End of script ");   
</script>

上記のコードが正常に実行されると、次の出力が表示されます。

プログラムは最初に「スクリプトの終わり」を表示し、次にgetSum（）メソッドを1つずつ呼び出した結果を表示します。

End of script  
11 
30 
70

これは、getSum（）が非同期スタイルまたは非ブロッキングスタイルで呼び出されていることを示しています。Promiseは、コールバックに対処するための優れたクリーンな方法を提供します。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved