日韩特黄一级免费毛片,91极品国模无码

新聞中心

這里有您想知道的互聯網營銷解決方案

使用Promises編寫更好的JavaScript代碼

你可能已經無意中聽說過 Promises 是多么的代表未來。所有酷孩子們都使用它們，但你不知道為什么它們如此特別。難道你不能使用回調么？有什么了不起的？在本文中，我們將看看promises是什么以及如何使用它們寫出更好的JavaScript。

創(chuàng)新互聯公司是一家專業(yè)提供都江堰企業(yè)網站建設,專注與成都網站制作、成都網站建設、外貿營銷網站建設、H5網站設計、小程序制作等業(yè)務。10年已為都江堰眾多企業(yè)、政府機構等服務。創(chuàng)新互聯專業(yè)網站設計公司優(yōu)惠進行中。

Promises易于閱讀

比如說我們想從HipsterJesus的API中抓取一些數據并將這些數據添加到我們的頁面中。這些API的響應數據形式如下：

 
 
  
  {    
    "text": "Lorem ipsum...
",    
    "params": {    
      "paras": 4,    
      "type": "hipster-latin"   
    }}

要使用回調的話，我們通常要寫如下形式的東西：

 
 
  
  $.getJSON('http://hipsterjesus.com/api/', function(data) {    
    $('body').append(data.text);    
  });

如果你有jQuery的使用經歷，你會認出我們創(chuàng)建了一個GET請求并且希望響應內容是JSON。我們還傳遞了一個回調函數來接受響應的JSON，以將數據添加到文檔中。

另外一種書寫方法是使用getJSON方法返回的promise對象。你可以直接在這個返回對象上綁定一個回調。

 
 
  
  var promise = $.getJSON('http://hipsterjesus.com/api/');promise.done(function(data) {    
    $('body').append(data.text);    
  });

在上面的回調例子中，當響應成功時它將API請求的結果添加到文檔中。但當響應失敗是會發(fā)生什么呢？我們可以在我們的promise上綁定一個失敗處理器。

 
 
  
  var promise = $.getJSON('http://hipsterjesus.com/api/');promise.done(function(data) {    
    $('body').append(data.text);});promise.fail(function() {    
    $('body').append('Oh no, something went wrong!
');    
  });

大多數人刪掉了promise變量，這樣更簡潔，一眼就能看出代碼的作用。

 
 
  
  $.getJSON('http://hipsterjesus.com/api/').done(function(data) {    
    $('body').append(data.text);}).fail(function() {    
    $('body').append('Oh no, something went wrong!
');    
  });

jQuery也包含一個一直發(fā)生的事件處理器，不論請求成功失敗都會被調用。

 
 
  
  $.getJSON('http://hipsterjesus.com/api/').done(function(data) {    
    $('body').append(data.text);}).fail(function() {    
    $('body').append('Oh no, something went wrong!
');}).always(function() {    
    $('body').append('I promise this will always be added!.
');    
  });

通過使用promise，回調的順序是按預期的。我們能確保正?；卣{先被調用，然后是失敗回調，***是一直發(fā)生的回調。

更好的API

比如說我們想創(chuàng)造一個HipsterJesus API的封裝對象。我們會添加一個方法——html，它將來自API的HTML數據返回。與之前設置一個回調處理器來解析請求不同，我們可以讓方法返回一個promise對象。

 
 
  
  var hipsterJesus = {    
    html: function() {    
      return $.getJSON('http://hipsterjesus.com/api/').then(function(data) {    
        return data.text;    
      });    
    }};

這個做法很酷，這樣我們可以繞過promise對象而不必擔心何時或如何解析它的值。任何需要promise返回值的代碼只需注冊一個成功響應回調即可。

then方法允許我們修改promise的結果并將其傳遞給鏈中的下一個處理器。這意味現在我們可以這樣使用新的API：

 
 
  
  hipsterJesus.html().done(function(html) {    
    $("body").append(html);    
  });

直到最近，AngularJS出現了一個殺手級特性，模板可以直接綁定到promise。在Angular的控制器中，像這樣：

 
 
  
  $scope.hipsterIpsum = $http.get('http://hipsterjesus.com/api/');

這樣，在模板中寫{{ hipsterIpsum.text }}就很簡單了。當promise解析后，Angular不需要自動更新視圖。不幸的是Angular團隊已經放棄了這一特性?，F在，它可以通過調用$parseProvider.unwrapPromises(true)來啟用。我希望Angular已經其他框架一直包含此特性（我會一直留意）。

鏈

promise最出彩的部分是你可以將它們串聯起來。比如說我們想添加一個方法到一個返回一段數組的API。

 
 
  
  var hipsterJesus = {    
     
    html: function() {    
      return $.getJSON('http://hipsterjesus.com/api/').then(function(data) {    
        return data.text;    
      });    
    },    
     
    paragraphs: function() {    
      return this.html().then(function(html) {    
        return html.replace(/<[^>]+>/g, "").split("");    
      });    
    }};

我們以上面的方式這種HTML方法，我們用它在paragraphs方法中。因為promise回調函數的返回值將傳遞給鏈中的下一個回調，我們能夠在通過它們時自由地創(chuàng)建小的、功能性的方法來改變數據。

我們可以按需求任意次串聯promise。讓我們添加一個。

 
 
  
  var hipsterJesus = {    
     
    html: function() {    
      return $.getJSON('http://hipsterjesus.com/api/').then(function(data) {    
        return data.text;    
      });    
    },    
     
    paragraphs: function() {    
      return this.html().then(function(html) {    
        return html.replace(/<[^>]+>/g, "").split("");    
      });    
    },    
     
    sentences: function() {    
      return this.paragraphs().then(function(paragraphs) {    
        return [].concat.apply([], paragraphs.map(function(paragraph) {    
          return paragraph.split(/. /);    
        }));    
      });    
    }};

多個調用

可能promise最顯著的特點是調用多個API的能力。當使用回調時，如果你需要同時創(chuàng)建兩個API調用時會發(fā)生什么呢？你可能會這樣寫：

 
 
  
  var firstData = null;var secondData = null;var responseCallback = function() {    
     
    if (!firstData || !secondData)    
      return;    
     
    // do something}$.get("http://example.com/first", function(data) {    
    firstData = data;    
    responseCallback();});$.get("http://example.com/second", function(data) {    
    secondData = data;    
    responseCallback();    
  });

使用promise的話，這就簡單多了：

 
 
  
  var firstPromise = $.get("http://example.com/first");    
  var secondPromise = $.get("http://example.com/second");    
  $.when(firstPromise, secondPromise).done(function(firstData, secondData) {    
    // do something    
  });

這里我們使用when方法，將其綁定到一個供兩個請求都完成時調用的處理器上。

結論

這就是promise。希望你馬上就想到一些可以用promise實現的的可怕的事情。你最喜歡使用它們的方式是什么？在評論中告訴我吧！

*注：為簡單起見，本文使用了jQuery的延期執(zhí)行。jQuery的Deferred對象和Promises/A+的規(guī)范間有細微的差別，這個規(guī)范更標準。更多信息，查看jQuery維基上的問答。

英文原文：Write Better JavaScript with Promises

譯文鏈接：http://www.oschina.net/translate/write-javascript-promises

名稱欄目：使用Promises編寫更好的JavaScript代碼
網頁地址：http://m.5511xx.com/article/dhgdghj.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

新聞中心

Promises易于閱讀

更好的API

鏈

多個調用

結論

其他資訊