1. Promise とは何ですか?
2. なぜ Promise が存在するのでしょうか?Promise は、非同期プログラミングで使用されるコールバック メカニズムのいくつかの問題を解決するために作成されました。
コールバック地獄: Promise はネストされたコールバックを .then().then()… に変換できるため、コードの記述と読み取りがより直感的になります。
3つのPromise共通API
4つのPromiseの一般的な使用法
.then() は値を返さない関数なので、Promise チェーンは継続されなくなります。この時点では、後で .then() を呼び出しても効果はありません。 Promise.resolve('foo').then(関数{ console.log(s); }).then(関数{ // 実行されない console.log(s); }); .then()には戻り値関数があり、Promiseチェーンを継続することができます。 Promise.resolve('foo').then(関数{ console.log(s); s + 'bar' を返します。 }).then(関数{ console.log(s); }); // フー // フーバー .then() には値を返す関数があり、戻り値は別の Promise オブジェクトであり、これによっても Promise が続行されます。前者との違いは、.then() を再度呼び出すと非同期操作がトリガーされる可能性があるため、次のラウンドの resolve() がすぐにはトリガーされないことです。 Promise.resolve('foo').then(関数{ 新しい Promise を返します ((resolve, reject) => { console.log(s); タイムアウトを設定する(() => { 解決(s + 'bar') }, 1000); }); }).then(関数{ console.log(s); }); // フー // foobar ("foo" が表示されてから 1 秒後に表示されます)
//デモ promise1 を const として返す。 定数promise2 = 42; const promise3 = 新しい Promise((resolve, 拒否) => { setTimeout(解決、100、'foo'); }); Promise.all([promise1, promise2, promise3]).then((値) => { console.log(値); }); // 期待される出力: 配列 [3, 42, "foo"] Promise.all() と sync await の違い //sync 操作時間を2秒待機する async function Index2() { コンソール.time() const p1 = 新しい Promise((resolve, reject) => {を待つ console.log('ここがp1です') タイムアウトを設定する(() => { 解決('p1の戻り値です') }, 1000) }) const p2 = 新しい Promise((resolve, reject) => {を待つ console.log('ここがp2です') タイムアウトを設定する(() => { 解決('p2の戻り値です') }, 1000) }) コンソールログ(p1) コンソール.log(p2) コンソール.timeEnd() } インデックス2(); // 呼び出しを実装するには Promise.all() を使用します。操作時間1秒関数Index() { コンソール.time() const p1 = new Promise((resolve, deny) => { console.log('ここがp1です') タイムアウトを設定する(() => { 解決('p1の戻り値です') }, 1000) }) const p2 = new Promise((resolve, deny) => { console.log('ここがp2です') タイムアウトを設定する(() => { 解決('p2の戻り値です') }, 1000) }) Promise.all([p1, p2]).then((val) => { コンソール.log(値) コンソール.timeEnd() }) } 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...
AES暗号化の使用データ転送の暗号化と復号化処理 --- AES.js最初のステップ: vue に ...
注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...
接続クエリ:これは、2 つのクエリ (またはテーブル) の各行をペアで接続した結果です。つまり、1 ...
目次ネスティング親子コンポーネント通信ブラザーコンポーネント通信撤回するReact の Linked...
目次1. サブルート構文2. 例1. 2つの新しいコンポーネントを作成し、その内容を変更する2. ル...
1. ボタンが押されたときに点線のボックスをキャンセルする<br />入力に属性値hid...
この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...
背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...
vue3.0 への最初の試みを記録します。プロジェクトを開始したときに、「モジュール 'wo...
目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...
目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...
目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...
mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...
序文smb は、クライアントとサーバー間の Web 接続および情報通信に使用できるプロトコルの名前で...