JavaScript Promiseチュートリアル:JSおよびES6での解決、拒否、およびチェーン

Promiseは、JavaScriptで非同期操作を処理する方法の1つです。多くの人がPromisesの仕組みを理解するのに苦労しているので、この投稿ではできるだけ簡単に説明しようと思います。

約束は幅広いトピックであるため、この記事で詳細に立ち入ることはできません。ただし、Promisesとは何かの全体的な概要、resolve、reject、chainingなどの用語の説明、およびPromisesを作成して使用するためのコード例があります。

前提条件:この記事をよりよく理解するには、JavaScriptコールバックに関する他の投稿を確認してください。

約束とは何ですか?

JavaScriptでの約束は、実際の約束に似ています。私たちが実生活で約束をするとき、それは私たちが将来何かをするつもりであるという保証です。約束は未来のためにしかできないからです。

約束には2つの可能な結果があります:時が来たときにそれが守られるか、守られないかのどちらかです。

これは、JavaScriptのpromiseでも同じです。JavaScriptでpromiseを定義すると、時が来たときに解決されるか、拒否されます。

JavaScriptでの約束

まず第一に、約束はオブジェクトです。Promiseオブジェクトには次の3つの状態があります。

  • 保留中:初期状態、Promiseが成功または失敗する前
  • 解決済み:完了した約束
  • 拒否:約束の失敗

たとえば、Promiseを使用してサーバーにデータを要求すると、データを受信するまでサーバーは保留モードになります。

サーバーから情報を取得することに成功した場合、Promiseは正常に解決されます。しかし、情報が得られない場合、Promiseは拒否された状態になります。

さらに、複数のリクエストがある場合、最初のPromiseが解決(または拒否)された後、新しいプロセスが開始され、チェーンと呼ばれる方法で直接アタッチできます。

必要に応じて、以下のビデオバージョンもご覧いただけます。

コールバックとプロミスの違いは何ですか?

コールバック関数とPromisesの主な違いは、コールバックを渡すのではなく、Promiseにアタッチすることです。そのため、Promisesでは引き続きコールバック関数を使用しますが、方法は異なります(チェーン)。

これはPromisesを使用する最大の利点の1つですが、なぜですか?

チェーンとは何ですか?

コールバック関数は、JavaScriptの非同期操作に単独で長年使用されてきました。ただし、場合によっては、Promisesを使用する方が適切な場合があります。

実行する非同期操作が複数あり、それらに古き良きコールバックを使用しようとすると、コールバック地獄と呼ばれる状況にすぐに気付くでしょう。

firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);

ただし、Promisesで同じ操作を処理する場合、コールバックを渡すのではなくアタッチできるため、今回は上記の同じコードがはるかにクリーンで読みやすくなります。

firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);

上記のコードは、複数のコールバックを次々にチェーンする方法を示しています。連鎖は、Promisesの最も優れた機能の1つです。

Promiseを段階的に作成して使用する

まず、コンストラクターを使用してPromiseオブジェクトを作成します。

const myPromise = new Promise();

成功(解決)用と失敗(拒否)用の2つのパラメーターを取ります。

const myPromise = new Promise((resolve, reject) => { // condition });

最後に、条件があります。条件が満たされた場合、Promiseは解決されます。それ以外の場合、Promiseは拒否されます。

const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });

そこで、最初のPromiseを作成しました。それでは使ってみましょう。

then()解決された約束の場合:

この投稿の冒頭の写真をもう一度見ると、2つのケースがあることがわかります。1つは解決された約束の場合、もう1つは拒否された場合です。Promiseが解決されると(成功した場合)、次に何かが発生します(成功したPromiseで何をするかによって異なります)。

myPromise.then();

then()メソッドは、Promiseが解決された後に呼び出されます。次に、解決されたPromiseをどうするかを決定できます。

たとえば、Promiseから取得したメッセージをコンソールに記録しましょう。

myPromise.then((message) => { console.log(message); });

拒否されたPromiseのcatch():

ただし、then()メソッドは、解決されたPromise専用です。Promiseが失敗した場合はどうなりますか?次に、catch()メソッドを使用する必要があります。

同様に、then()メソッドをアタッチします。then()の直後にcatch()メソッドを直接アタッチすることもできます。

myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });

したがって、promiseが拒否されると、catch()メソッドにジャンプし、今回はコンソールに別のメッセージが表示されます。

要約

したがって、これがJavaScriptでPromiseを作成し、解決および拒否されたケースに使用する方法です。約束はより広いトピックであり、それらについて学ぶべきことがもっとたくさんあります。したがって、それらがどのように機能するかを理解するには時間がかかります。

この投稿はPromisesの紹介にすぎません。JavaScriptPromisesとは何か、およびそれらの使用方法についてのアイデアを得るのに役立つことを願っています。

Web開発について詳しく知りたい場合は、私のYoutubeチャンネルにアクセスして詳細を確認してください。

Thank you for reading!