JavaScript における Promise の詳細な説明

JavaScript における Promise の詳細な説明

Promise は非同期プログラミングのソリューションです。非同期操作のメッセージを取得できるオブジェクトです。非同期プログラミングの難しさを大幅に改善し、コールバック地獄を回避します。コールバック関数やイベントなどの従来のソリューションよりも合理的で強力です。

構文的には、Promise は非同期操作からメッセージを受信できるオブジェクトです。さまざまな非同期操作を同じ方法で処理できるように、統一されたAPIを提供します。

1. Promise インスタンスには 3 つの状態があります。

(1)保留中

(2)解決

(3)拒否

2. Promiseインスタンスには2つのプロセスがある

(1)保留中>完了:解決済み

(2)保留中>拒否:拒否

注意: ステータスが「購入と販売」から「その他のステータス」に変更されると、ステータスを変更することはできません。

Promise の基本的な使用法:

1. Promiseオブジェクトを作成する

Promise オブジェクトは非同期操作を表し、保留中 (進行中)、実行済み (成功)、拒否済み (失敗) の 3 つの状態があります。

Promise コンストラクターは、関数をパラメーターとして受け入れます。その 2 つのパラメーターは、resolve と reject です。

2. プロミス方式

Promise には 5 つの一般的なメソッドがあります。

(1)それから()

then メソッドは、2 つのコールバック関数をパラメータとして受け取ることができます。最初のコールバック関数は、Promise オブジェクトの状態が resolved に変わったときに呼び出され、2 番目のコールバック関数は、Promise オブジェクトの状態が declined に変わったときに呼び出されます。 2 番目のパラメータは省略できます。

promise = new Promise((resolve,reject)=>{ とする
    ajax('first').success(function(res){
        解決する(res);
    })
})
promise.then(res=>{
    新しい Promise を返します ((resovle,reject)=>{
        ajax('second').success(function(res){
            解決する
        })
    })
}).then(res=>{
    新しい Promise を返します ((resovle,reject)=>{
        ajax('second').success(function(res){
            解決する
        })
    })
}).then(res=>{
 })

(2) キャッチ()

このメソッドは then メソッドの 2 番目のパラメータと同等であり、拒否コールバック関数を指します。

もうひとつの機能としては、resolve コールバック関数の実行時にエラーが発生して例外がスローされた場合、実行は停止せず catch メソッドに入ります。

p.then((データ) => {
     console.log('解決されました',データ);
},(エラー) => {
     console.log('拒否されました',err);
     }
); 
p.then((データ) => {
    console.log('解決されました',データ);
}).catch((エラー) => {
    console.log('拒否されました',err);
});

(3) すべて()

all メソッドはタスクを完了して実行できます。このメソッドは配列を受け取り、配列内の各項目は Promise オブジェクトです。配列内のすべての Promise 状態が解決済みに達すると、拒否される状態がある場合、すべてのメソッドの状態が解決済みになります。すると、すべてのメソッドのステータスが拒否されます。

ジャバスクリプト
promise1 = new Promise((resolve,reject)=>{ とする
	タイムアウトを設定します(()=>{
       解決する(1);
	},2000)
});
promise2 = new Promise((resolve,reject)=>{ とする
	タイムアウトを設定します(()=>{
       解決する(2);
	},1000)
});
promise3 = new Promise((resolve,reject)=>{ とする
	タイムアウトを設定します(()=>{
       解決する(3);
	},3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    コンソールログ(res);
    //結果は[1,2,3]です 
})

(4) 受信()

受信メソッドは all と同じで、受信したパラメータは Promise の配列ですが、all とは異なり、最初のイベントが実行されると、promise オブジェクトの値が直接返されます。

rece の実際の機能: 何かをしたいが、長い間諦めてしまったときに、この方法を使って解決することができます。

Promise.race([promise1, timeOutPromise(5000)]).then(res=>{})

(5) 最後に()

finally メソッドは、Promise オブジェクトの最終状態に関係なく実行される操作を指定するために使用されます。 (このメソッドはES2018標準で導入されています)

約束
.then(結果 => {···})
.catch(エラー => {···})
.finally(() => {···});

finally メソッドのコールバック関数はパラメーターを受け入れないため、以前の Promise ステータスが満たされたか拒否されたかを知る方法はありません。

約束
.finally(() => {
  // ステートメント });
// プロミスと同等
。それから(
  結果 => {
    // ステートメントは結果を返します。
  },
  エラー => {
    //ステートメントはエラーをスローします。
  }
);

上記のコードでは、finally メソッドが記述されていない場合は、成功と失敗の両方に対して同じステートメントを 1 回記述する必要があります。 finallyメソッドでは、一度だけ書くだけでよい。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript Promise の徹底解説
  • フロントエンドJavaScriptの約束
  • JS 9 Promise 面接の質問
  • JS の Promise に中止関数を追加する方法
  • JavaScriptのPromiseを徹底的に理解する

<<:  CSS の両端揃えを実現する div+css レイアウトの 4 つの方法の概要

>>:  ウェブページ作成時のHTMLタグの使用に注意してください

推薦する

js配列のfind、some、filter、reduceの違いの詳細な説明

Array の filter、find、some、reduce メソッドの違いを区別し、使用シナリオ...

Vue3 の父子値転送に関する簡単な説明

目次父から息子へ: 1. 親コンポーネントのサブコンポーネントタグに、サブコンポーネントに渡されるデ...

MySQL の中国語文字化け問題の解決方法

1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...

Linux\Nginx 環境での仮想ドメイン名の設定とテスト検証

Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...

CSS 経由で JS にパラメータを渡す方法

1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...

この記事はPReact10.5.13のソースコードを理解するのに役立ちます

目次render.js 部分create-context.js 部分差分部分Reactのソースコード...

JavaScriptはPromiseを使用して複数の繰り返しリクエストを処理します

1. なぜこの記事を書くのですか?重複リクエストの処理に関する記事をたくさん読んだことがあるでしょう...

ReactにおけるRefの相互利用の詳細な説明

目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...

mysql8.0.18 で winx64 をインストールするための詳細なチュートリアル (画像とテキスト付き)

MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...

Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

Vue の親子コンポーネントの値転送と一方向データフローの問題の詳細な説明

目次序文1. 親コンポーネントが子コンポーネントに値を渡す2. サブコンポーネントのprops型制約...

MySQL データベースの高度なクエリとマルチテーブルクエリ

MySQL マルチテーブルクエリワークシートを追加する -- ユーザーテーブル (ユーザー) テーブ...

JavaScriptの浅いコピーと深いコピーについての簡単な説明

目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...