JavaScript的流利接口，如在Angular.js

Question

我玩Angular.js，特別是與$http和下面的代碼：

$http.get('test.url').onsuccess(function(res){}); 

我想知道我怎麼可以編寫這樣的結構。首先嚐試在Angular.js代碼中確定這一點，但是我的JavaScript知識可能太弱而無法理解所有代碼。

所以，我嘗試了以下自己：

var command = function(){ 
    this.execute = function(cmd){ 
     setInterval(function(){ 
      // What to call here? 
     }, 60 * 60, 1000); 

     return this; 
    }; 

    this.onsuccess = function(callBack){ 
      return this; 
    } 
} 

var bla = new command(); 

bla.execute("myCommand").onsuccess(function(result){ 
    console.log(result); 
}); 

我敢肯定我的代碼是錯誤的地獄。我有什麼要打電話讓所有這些東西工作？

Answer 1

這些是承諾。它們是一種抽象，可讓您輕鬆組成延續。這裏是關於它的a great read。 This is also worth checking。

一個非常幼稚的和基本的方式做你想要什麼這裏是：

var command = function(){ 
    var cbs = []; 
    this.execute = function(cmd){ 
     setInterval(function(){ 
      cbs.forEach(function(f){ f();}); // call all callbacks 
     }, 60 * 60, 1000); 

     return this; 
    }; 

    this.onsuccess = function(callBack){ 
     // a return this here would require a queue- and do return a different generic command 
     // so we're not doing it here 
     cbs.push(callBack); // add a callback to the list of handlers 
    } 
} 

並承諾庫像藍鳥 - 你會怎麼做：

Promise.delay(1000).then(function(yourThing){ 

}); 

Answer 2

那些流暢的接口與其他流暢的接口不同，因爲每種方法都會返回promise。 jQuery有其自己的諾言方法，但可以與q一起使用。使用q（$q）。除xhr請求外，您還可以使用q進行異步操作。

Answer 3

與承諾角作品，但您可以在沒有承諾的情況下實施相同類型的功能：

var command = function(){ 
    this.execute = function(cmd){ 
     var theCallback; 
     setInterval(function(){ 

      if(typeof theCallback === "function"){ 
       theCallback(); 
      } 

     }, 60 * 60, 1000); 

     return { 
      onsuccess: function(callback){ 
       theCallback = callback; 
      } 
     }; 
    }; 
} 

var bla = new command(); 

bla.execute("myCommand").onsuccess(function(result){ 
    console.log(result); 
});