JavaScriptPromisesの使用方法

非同期コードは、JavaScriptで書くのが面倒でした。コードで非同期操作を作成するには、複数レベルのコールバック関数を処理する必要があります。コードに導入した関数が多いほど、読みにくくなります。

ES6では、約束が救いの手を差し伸べました。 Promiseは、JavaScriptで非同期コードを効率的に作成する方法です。

このガイドでは、約束とは何か、そしてそれらがどのように機能するかについて説明します。コードでそれらを使用する方法を学ぶのに役立つpromiseの例を見ていきます。始めましょう！

約束とは何ですか？

promiseは、将来受信したい応答を返すオブジェクトです。

JavaScriptの約束について考える良い方法は、JavaScriptの約束を人々が約束する方法と比較することです。あなたが約束をするとき、それはあなたが将来何かをするつもりであるという保証です。あなたは今そのことをするつもりはありません。後でそれを行います。

約束は、次の3つの状態のいずれかに存在する可能性があります。

• 保留中：約束はまだ完了していません。
• 拒否：Promiseが値を返すことができませんでした。
• 履行済み：約束が完了しました。

これは、実生活での約束に似ています。あなたはあなたが将来実行しようとしているとあなたが言う保留中の約束を持つことができます。あなたは約束を果たすことができます。約束を拒否または「破る」ことができますが、同意したことを実行することはできません。

あなたが約束をするとき、それは保留になります。応答が受信され、約束が履行されるか拒否されるまで、約束はこの状態で存在します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

JavaScriptプロミスを作成する方法

まず、ユーザーの名前を返すPromiseを作成します。この関数は、3秒後にユーザーの名前をプログラムに返します。これは、promiseが非同期コードの記述にどのように使用されているかを確認するのに役立ちます。

Promiseを作成するには、Promiseオブジェクトを作成する必要があります。

new Promise((resolve, reject) => { 
	// Your code here
});

Promiseは、Promiseの成功を処理する関数と失敗したPromiseを処理する関数の2つの引数を受け入れます。これは、私たちの約束がその結果に応じて異なる値を返すことを意味します。

promiseには、promiseが正常に実行されたかどうかを判断する「if」ステートメントが含まれている必要があります。 promiseが正常に実行されなかった場合、拒否された状態のpromiseを返す必要があります。

new Promise((resolve, reject) => { 
	if (value is true) {
		resolve();
	} else {
		reject();
	}
});

新しいJavaScriptファイルを開き、次のコードでコピーします。

let returnName = new Promise((resolve, reject) => {
	let name;
	setTimeout(() => {
		name = "Cinnamon";

		if (name === "Cinnamon") {
			resolve(name);
		} else {
			reject("This promise has failed.");
		}
	}, 3000);
});

このコードは、Cinnamonという名前を返します。 私たちが約束を呼ぶとき、私たちのメインプログラムに。このコードの実行には3秒、つまり3,000ミリ秒かかります。これは、約束を呼び出すと、3秒間保留になることを意味します。約束が決まった後、解決または拒否された約束はメインプログラムに返されます。

「名前」が「シナモン」と等しい場合、私たちの約束は正常に解決されます。そうでなければ、私たちの約束は拒否されます。この例では、「name」は「Cinnamon」に設定されています。名前を指定したので、約束は自動的に解決されます。

then（）およびcatch（）とPromises

コードはまだ実行されていません。 promiseオブジェクトを呼び出す必要があります。

returnName.then(data => {
	console.log(data);
});

then() キーワードを使用すると、promiseから応答を取得できます。約束が決まった後に呼び出されます。この例では、dataの内容を出力します 、これは私たちの約束からコンソールに返される応答です。

コードが返されます：Cinnamon。

then() 成功した約束のみを処理します。私たちの約束が拒否された場合はどうなりますか？ここでcatch() メソッドが入ります。

複数のthen() を指定できます 約束の中の声明。これは、プロミスチェーンと呼ばれます。例を使用して、連鎖がどのように機能するかを説明しましょう。

returnName.then(data => {
	console.log(data);
}).then(() => {
	console.log("This function is over!");

このコードは次を返します：

シナモン

この機能は終了しました。

then（）ステートメントは、promiseコンストラクター内で指定された順序で実行されます。

catch() メソッドは、then()のようなpromiseに付加されます 方法。名前の例で拒否されたpromiseを管理するハンドラーを作成しましょう。

returnName.then(data => {
	console.log(data);
}).catch(error => {
	console.log(error);
});

catch() に取り組みました then()の後のステートメント 声明。 promiseコードの最後にセミコロン（;）を使用していることに注意してください。 then()の後にセミコロンを指定しないでください catch() を使用している場合のメソッド 。これにより、JavaScriptにthen（）とcatch（）が分離していることが通知されるため、コードでエラーが返されます。

約束が拒否された場合、catch（）ステートメントの内容が実行されます。

コードを実行するとどうなるか見てみましょう。

シナモン

値Cinnamon 約束が正常に解決されたため、が返されます。 「name」の値がpromiseの「Cinnamon」でない場合、エラーが返されます。

Uncaught（in promise）このpromiseは失敗しました。

「この約束は失敗しました」というエラーメッセージを指定しました。 promise内のreject（）関数で。

Promisesでfinally（）

約束が成功したか失敗したかに関係なく、約束が実行された後にコードのブロックを実行したい場合はどうなりますか？

ここでfinally() ステートメントは便利です。 finally() ステートメントは、約束が履行されるか拒否されるかどうかに関係なく実行されます。 finallyステートメントを使用するようにpromise呼び出しを更新しましょう。

returnName.then(data => {
	console.log(data);
}).catch(error => {
	console.log(error);
}).finally(() => {
	console.log("The returnName promise has been executed.");
});

私たちのコードは次を返します：

シナモン

returnNameプロミスが実行されました。

私たちの約束はCinnamonを返します 成功したからです。 finally() の内容 次にステートメントが実行され、コンソールに別のメッセージが返されます。

結論

JavaScriptの約束により、クリーンな非同期コードを記述できます。

このガイドでは、約束の基本について説明しました。このガイドで説明した以上に、約束には多くのことがあります。学習の旅の次のステップは、独自のコードでいくつかの約束を書くことです。

ここに課題があります。Webリクエストを作成してその応答を返すpromiseを作成します。これを行うには、fetch（）APIを使用してリクエストを作成する必要があります。このリクエストは、プロミスで囲む必要があります。成功した場合と失敗した場合の両方でpromiseを処理するコードを作成する必要があります。

さらに詳しく知りたい場合は、JavaScript非同期関数を確認してください。これらは非同期コードの記述に使用でき、Promisesで一般的に使用されます。

これで、エキスパートのようにJavaScriptの約束を書き始める準備ができました。