如何在角度2組件中使用Promise結果？

Question

我正在使用新的window.Fetch方法來獲取一些JSON。這將返回一個promise對象，從中我可以用console.log讀取json數據。

但是，如果我在角度組件內使用fetch方法，則在返回結果時無法調用其他方法。看起來範圍不知怎麼丟失了？

請參見下面的評論：

(function(app) { 

    app.Actorlist = 
    ng.core.Component({ 
     selector: 'actor-list', 
     templateUrl: './app/actorlist.component.html' 
    }) 
    .Class({ 
     constructor: function() { 
     }, 

     showActors: function(js) { 
      this.actorName = js.name; 
     }, 

     searchActor: function(){ 

     fetch('http://swapi.co/api/people/1/') 
      .then(function(response) { 
      return response.json(); 
      }) 
      .then(function(js) { 
      // this logs the json result correctly 
      console.log(js); 

      // error: showActors is not defined 
      showActors(js); 

      // error: this.showActors is not defined 
      this.showActors(js); 

      // should I use return? return to where? 
      return js; 
      }); 
     } 
    }); 

})(window.app || (window.app = {})); 

Answer 1

使用arrow functions保持詞彙方面：

fetch('http://swapi.co/api/people/1/') 
    .then(function(response) { 
    return response.json(); 
    }) 
    .then(js => { 
    this.showActors(js); 
    }); 

你也並不真的需要你不要用這個從承諾回調返回任何東西以任何方式進一步承諾鏈。