Comment réécrire cette chaîne de promesses pour éviter le besoin de multiples fonctions?

Question

Je ne fais que commencer avec mobx et réagir (ce qui est une super équipe, d'ailleurs!) Et j'ai un petit problème avec mon magasin. Je veux aller chercher de façon asynchrone des données à partir d'une API existante, puis utiliser ces données pour mettre à jour certaines observables existantes dans mon magasin:

class StationStore { 

    @observable stations = [] 

    loadStations() { 
    fetch('http://localhost:3000/api/station/getStations') 
    .then(function(response) { return response.json() }) 
    .then(stations=>this.parseStations(stations)); 
    } 

    @action parseStations(stations) { 
    var newStations = stations.map((station)=>{ 
     let s = new Station; 
     s.id=station.id; 
     s.name=station.Text; 
     s.deviceType=station.DeviceType; 
     return s; 
    }); 
    this.stations.replace(newStations); 
    } 
} 

Comme vous pouvez le voir, je dois diviser ma logique en deux fonctions distinctes afin de être en mesure d'accéder au this.stations. J'ai essayé d'inclure la carte et de remplacer la partie dans la seconde puis(), mais quand je le fais, je ne peux pas accéder à mon magasin car ce est indéfini là.

Comment puis-je résoudre ce problème?

Answer 1

Utilisez var self = this; devrait résoudre votre problème

class StationStore { 
    @observable stations = []; 

    loadStations() { 
     var self = this; 
     fetch('http://localhost:3000/api/station/getStations') 
      .then(function (response) { 
       return response.json() 
      }) 
      .then(stations => { 
       self.stations.replace(stations.map((station) => { 
        let s = new Station; 
        s.id = station.id; 
        s.name = station.Text; 
        s.deviceType = station.DeviceType; 
        return s; 
       })); 
      }); 
    } 
}