JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明

1. 概要

Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期プログラミングに関しては、同期と非同期の概念について話す必要があります。

同期プログラミングを文字通り理解すると、2 つのタスクが同期して実行されることを意味するようです。これは誤った理解です (少なくとも私はこの概念に触れる前は誤解していました)。同期と非同期は、コードが実行を指定する順序を指します (構造化プログラミングパラダイムの実行順序は常に上から下、前から後ろです)。実行順序がコードと同じ場合は同期であり、異なる場合は非同期です。

当初、オペレーティングシステムはコマンドラインベースであり、すべての言語は同期ステートメントで設計されていました。この場合、非同期プログラミングは必要ありませんでした。しかしすぐに、グラフィカルな操作インターフェースが登場し、すべてのプログラミング言語は GUI を扱う必要が生じました。理解しなければならないのは、GUI プログラムは常に描画を行うインターフェースプログラムであるということです。

ながら(完了)
{
    何かを行う();
    GUI を描画します。
}

各ループで実行されるタスク dosomething() のイベントが長すぎると、インターフェイスは長時間描画コマンドを受信できず、直感的に遅延が発生します。この問題を解決するために、JavaScript をスクリプトとして使用するブラウザでは、通常、イベントループメカニズムを採用しています。

時間のかかる動作はイベントとして定義され、イベントは応答コールバック関数にバインドされます。
各ループでは、同期コードを優先します。
同期コードが完了し、イベントは実行順に走査されます。
同期コードのない残りのループでは、イベントの対応する関数が順番に実行されます。

このように、シングルスレッドの場合はタスクの実行順序が変更され、非同期機構が実装されます。同期動作が常に迅速に完了し、インターフェイスが時間内に描画されるため、インターフェイスの遅延現象が大幅に改善されます。

イベントループメカニズムは、UI デバイスの入力と出力をイベントとして定義します。実際には、時間のかかる動作はたくさんありますが、一般的には IO に関連しています。IO 関連の動作については、JavaScript は非同期動作コードを提供します。たとえば、画像を読み込む例を次に示します。

2. 詳細な議論

まず、HTML ページ PromiseTest.html を準備し、この HTML ページに JS スクリプト PromiseTest.js を読み込みます。

<!DOCTYPE html>
<html>

<ヘッド>
    <メタ文字セット="utf-8">
    <script src="./3rdParty/jquery-3.5.1.js"></script>
    <title>サンプル</title>
</head>

<本文>
    <div id = "コンテナ"> </div>
    <script src="./PromiseTest.js"></script>
</本文>

</html>

ネイティブ JS 画像オブジェクト Image は、イベントを通じて画像の非同期読み込みを実装します。

$(関数() {    
    var img = 新しい画像();
    img.onload = 関数（）{ 
        $(img).appendTo($('#container'));        
    };
    画像を保存する    
});

対応する関数を Image の onload イベントハンドラーに追加します。画像が読み込まれたら、読み込まれた Image を HTML ページの div 要素の子ノードに追加します。このページをブラウザで開くと、対応するアドレスの画像が直接表示されます。

もちろん、この JS スクリプトは Promise を通じて書き換えることもできます。

$(関数() {    
    関数 getImg(uri){
        新しいPromise(function(resolve,reject){を返す
            var img = 新しい画像();
            img.onload = 関数（）{
                解決(画像);
            };
            img.onerror = 関数（）{
                拒否(エラー("画像の読み込みエラー!"));
            }
            URI をアップロードします。
        });   
    }  
    
    var imgUri = "./img.jpg";
    getImg(imgUri).then(function(img){
        $(img).appendTo($('#container')); 
    }, 関数(エラー){
        console.error("失敗しました!", error);
    })
});

一見すると、Promise を使用するとプログラムがより複雑で扱いにくくなるように思えます。しかし、Promise メカニズムの意味を深く理解する必要があります。この設計は楽しみのためではありません。

Promise オブジェクトは、実行がスケジュールされているがまだ開始されていないアクションを表します。これはアクションであるため、当然、計画する必要があり、アクションの結果を指定する必要があります。成功した場合は、resolve を実行し、失敗した場合は、reject を実行します。一般的には、関数を定義して Promise オブジェクトを返すことができます。
目的の動作が実際に開始されるように、Promise オブジェクトを返す関数を呼び出します。ただし、resolve と deny は単なる 2 つのコールバック関数なので、then メソッドを使用して、成功と失敗に対応する実際の処理関数を指定します。

ご覧のとおり、この設計は複雑に見えますが、同期動作と非常によく似ています。つまり、未完了の動作オブジェクトを指定し、動作が完了したときにそれをどのように処理するか、動作が失敗したときにそれをどのように処理するかを指定します。そして、これは Promise の目的でもあります。つまり、非同期操作を同期動作に近づけることです。

3. 参考文献

同期と非同期

JSシングルスレッド非同期実装の原理を簡単に説明する

JavaScriptの動作の仕組みを詳しく解説：イベントループについて改めて解説

JavaScript 非同期プログラミングにおける Promise の初期の使用に関するこの記事はこれで終わりです。js Promise の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません: