あなたは約束を耳にしているかもしれません、そして、多くの人々がそれについてそれについて話しています、それを使用していますが、あなたは彼らがなぜそんなに特別なのかわかりません。コールバックを使用できませんか?何が特別ですか?この記事では、約束とは何か、それらを使用してよりエレガントなJavaScriptコードを書く方法を見てみましょう。
読みやすい約束
たとえば、Hipsterjesus APIからいくつかのデータを取得し、このデータをページに追加したいと考えています。これらのAPIの応答データは次のとおりです。
{"Text": "<p> lorem ipsum ... </p>"、 "params":{"paras":4、 "type": "Hipster-Latin"}}コールバックを使用するには、通常、次のようなものを書きます。
$ .getjson( 'http://hipsterjesus.com/api/'、function(data){$( 'body')。append(data.text);});jqueryの使用経験がある場合は、GETリクエストを作成し、応答をJSONにしたいことを認識します。また、コールバック関数を渡して、応答のJSONを受け入れて、ドキュメントにデータを追加します。
書く別の方法は、GetJsonメソッドによって返されたPromiseオブジェクトを使用することです。この返品オブジェクトに直接コールバックをバインドできます。
var promise = $ .getjson( 'http://hipsterjesus.com/api/'); promise.done(function(data){$( 'body')。append(data.text);});上記のコールバックの例では、応答が成功したときにAPI要求の結果をドキュメントに追加します。しかし、応答が失敗するとどうなりますか?失敗したプロセッサを約束にバインドできます。
var promise = $ .getjson( 'http://hipsterjesus.com/api/'); promise.done(function(data){$( 'body')。append(data.text);}); proming.fail(){$( 'body')。ほとんどの人はPromise変数を削除します。これはより簡潔で、コードの機能を一目で確認できます。
$ .getJson( 'http://hipsterjesus.com/api/').done(function(data){$( 'body')。append(data.text);})。fail($( 'body')。jQueryには、常に発生するイベントハンドラーも含まれており、リクエストの成功や失敗に関係なく呼び出されます。
$ .getjson( 'http://hipsterjesus.com/api/').done(function(data){$( 'body')。append(data.text);})。追加!</p> ');約束を使用することにより、コールバックの順序は予想通りです。通常のコールバックが最初に呼び出され、次に失敗したコールバック、そして最後に発生し続けるコールバックを確認することができます。
より良いAPI
たとえば、Hipsterjesus APIのカプセル化されたオブジェクトを作成します。 APIからHTMLデータを返すメソッド-HTMLを追加します。リクエストを解析するためにコールバックプロセッサのセットアップとは異なり、メソッドにPromiseオブジェクトを返すことができます。
var hipsterjesus = {html:function(){return $ .getjson( 'http://hipsterjesus.com/api/').then(function(data){return data.text;}); }};これはクールなので、その価値をいつ、どのように解析するかを心配することなく、Promiseオブジェクトをバイパスできます。 Promise Return Valueを必要とするコードは、成功した応答コールバックで登録できます。
次に、約束の結果を変更し、チェーン内の次のプロセッサに渡すことができます。これは、このような新しいAPIを使用できることを意味します。
hipsterjesus.html()。done(function(html){$( "body")。append(html);});最近まで、AngularJSにはキラー機能があり、テンプレートは約束に直接バインドできます。このようなAngularのコントローラーで:
$ scope.hipsteripsum = $ http.get( 'http://hipsterjesus.com/api/');
このようにして、テンプレートに{{hipsteripsum.text}}を書き込むのは非常に簡単です。 Promiseが解決した場合、Angularはビューを自動的に更新する必要はありません。残念ながら、Angularチームはこの機能を放棄しました。これで、$ parseprovider.unwrappromise(true)を呼び出すことで有効にすることができます。 Angularがすでにこの機能を他のフレームワークに含めていることを願っています(私はそれに注目します)。
チェーンコール
約束の最大の部分は、それらを結び付けることができるということです。たとえば、配列を返すAPIにメソッドを追加する必要があります。
var hipsterjesus = {html:function(){return $ .getjson( 'http://hipsterjesus.com/api/').then(function(data){return data.text;}); }、段落:function(){return this.html() }};上記の方法でこのHTMLメソッドを使用し、パラグラフ法で使用します。 Promise Callback関数の返品値はチェーンの次のコールバックに渡されるため、データを通過するときにデータを変更するための小さな機能的な方法を自由に作成できます。
必要に応じていつでも約束を接続できます。追加しましょう。
var hipsterjesus = {html:function(){return $ .getjson( 'http://hipsterjesus.com/api/').then(function(data){return data.text;}); }、段落:function(){return this.html() }、contences:function(){return this.paragraphs()。then(function(paragraphs){return [] .concat.apply([]、paragraphs.map(function(paragraph){paragraph.split( /。 /);});});}); }};複数の呼び出し
おそらく、約束の最も顕著な特徴は、複数のAPIを呼び出す能力です。コールバックを使用するときに同時に2つのAPI呼び出しを作成する必要がある場合はどうなりますか?あなたはこれを書くかもしれません:
var firstData = null; var seconddata = null; var ressongecallback = function(){if(!firstData ||!secondData)return; //何か} $。get( "http://example.com/first"、function(data){firstData = data; responseCallback();}); $ .get( "http://example.com/second"、function(data){seconddata = data; ressongecallback();});これは約束を使用するのがはるかに簡単です:
var firstpromise = $ .get( "http://example.com/first"); var secondpromise = $ .get( "http://example.com/second"); $ .WHEN(FirstPromise、SecondPromise).done(function(firstData、secondData){//何かをする});ここでは、Whenメソッドを使用して、両方のリクエストが完了したときに呼び出されるプロセッサにバインドします。
結論は
これは約束です。約束を持って達成できる恐ろしいことをすぐに考えることを願っています。それらを使用することで最も好きなことは何ですか?コメントで教えてください!
*注:簡単にするために、この記事ではjQueryの遅延実行を使用しています。 JQuery DeferredオブジェクトとPromises/A+仕様には微妙な違いがありますが、これはより標準的です。
上記の記事は、よりエレガントなJavaScriptコードを書くために約束を使用する方法は、私があなたと共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。