JavaScript 非同期コールバック_javascript スキルの Promise モードのカプセル化の例-jsチュートリアル-php.cn

JavaScript 非同期コールバック_javascript スキルの Promise モードのカプセル化の例

WBOY

リリース： 2016-05-16 16:45:40

オリジナル

1269 人が閲覧しました

Web ページ上のインタラクションはますます複雑になり、JavaScript の非同期操作がますます増えています。たとえば、一般的な ajax リクエストは、リクエストが完了するときに応答操作を必要とします。リクエストのプロセス中、ユーザーはページをブロックせずに他の操作を実行することもできます。フレンドリー。しかし、開発者にとって、この種の操作を大量に処理することは非常に不親切です。非同期リクエストによって完了する操作はコールバック関数で事前定義する必要があり、リクエストの完了時にこの関数を呼び出す必要があります。この非線形非同期プログラミング手法は、開発者を非常に不快にさせるだけでなく、多くの不便をもたらし、コードの結合と複雑さが増大し、コードの構成も非常に洗練されなくなり、コードの効率が大幅に低下します。保守性。状況はさらに複雑で、操作を実行する前に複数の非同期 Ajax リクエストが完了するまで待機する必要がある場合、コールバック関数のネストが発生します。複数のレベルをネストする必要がある場合は、祝福を求めるしかありません。
次の一般的な非同期関数を見てみましょう。

コードをコピーコードは次のとおりです。

var showMsg = function(){
 setTimeout( function(){
alert( 'hello' );
 }, 5000 );
};

関数にコールバックを追加したい場合は、通常これを行います。

コードをコピーコードは次のとおりです。

var showMsg = function( callback ){
 setTimeout (function(){
 alter( 'hello' );
 // ここにコールバックを追加します 
 callback();
 }, 5000 );
};

easy.js の Promise を使用する場合、元の関数を Promise インスタンスにカプセル化する必要がある場合、コールバックを追加する方法はより洗練されます。

コードをコピーコードは次のとおりです。

var showMsg = function(){
 // Promise インスタンスを構築します
 var Promise = new E.Promise();

 setTimeout(function(){
alert( 'hello' );

 // Promise の状態を変更する 
誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰誰へ50000000000 >

通常の関数を Promise インスタンスにカプセル化するには、3 つの重要な手順があります。最初の手順は、関数内に Promise インスタンスを構築することです。2 番目の手順は、デプロイメント関数の実行後に Promise のステータスを完了に変更することです。 3 番目のステップは、この Promise インスタンスを返すことです。各 Promise インスタンスには、保留中 (未完了)、解決済み (完了、成功)、および拒否済み (拒否、失敗) の 3 つの状態があります。コールバックを追加する方法を見てみましょう。 

コードをコピー

コードは次のとおりです。

showMsg().then(function( str ){ // コールバックはここに追加されます callback( str );});

これにより、コールバック関数が元の非同期関数から完全に分離され、コード構成の観点からははるかに洗練されています。 solve は、 then メソッドを使用して追加されたコールバックにデータを渡すために簡単に使用できるパラメーターを受け入れます。 
ajax リクエストの場合、easy.js は ajax メソッドを Promise オブジェクトに直接カプセル化し、コールバックする then メソッドを直接追加できます。 

コードをコピー

コードは次のとおりです。

E.ajax({ url : 'test1 .php', type : 'GET'}).then(function(){ // リクエストが成功した場合のコールバックを追加します

}, function(){

// リクエスト失敗時のコールバックを追加
});

then メソッドは 2 つの関数をパラメーターとして受け取ります。最初の関数は完了したコールバックで、2 番目の関数は失敗したコールバックです。
上記の ajax リクエストが複数ある場合はどうなりますか?次に、 when メソッドを使用する必要があります。このメソッドは、複数の Promise インスタンスをパラメータとして受け入れることができます。

コードをコピーコードは次のとおりです。

varrequests = E.when(E. ajax({
url : 'test1.php',
type : 'GET'
}), E.ajax({
url : 'test2.php',
type : ' GET'
}));

requests.then(function( arg1, arg2 ){
console.log( 'success：' arg1[0] arg2[0] );
}, function( arg1, arg2 ){
console.log( '失敗：' arg1 arg2 );
});

when メソッドは、複数の Promise インスタンスを配列に格納し、配列内のすべての Promise インスタンスが完了するまで待機してから、1 つのインスタンスが拒否された場合、そのインスタンスを直ちに実行します。

PromiseパターンはCommonJSの仕様の一つです。多くの主流の JavaScript ライブラリには、jQuery や Dojo などの対応する実装があり、これらの関数の実装は Deferred になっています。ここで私はやはり jQuery の Deferred について文句を言いたいのですが、内部での使用に関係なく、このモジュールはユーザーによる使用率が最も低いモジュールである必要があります。これはより複雑な使用法と一定の関係があります。