Vue/Bluebird: then callback doesn't run

Viewed 239

The then() for this.getStationsAsync() never runs. The catch() doesn't either, so there is likely nothing being rejected. Could I be doing something wrong with Promise.promisify(this.getStations)?

I have also tried this.getStationsAsync = Promise.promisify(this.getStations) inside the created() hook. I'm not getting any errors, but also not getting any console.logs() indicating that the then() executed.

import Vue from 'vue'
import axios from 'axios'
import Promise from 'bluebird'

methods:{
createStationMarkers (selectedNetworkMarker) {
      this.selectedNetwork = selectedNetworkMarker
      this.hideNetworkMarkers()
      debugger
      this.getStationsAsync()
      .then(() => {
        debugger
        console.log('inside then')
        this.addStationMarkers()
        this.test = true
      })
      .catch(error => {
        console.log(error)
      })
    }
},
getStations () {
      axios
        .get('/api/network/' + this.selectedNetwork.id)
        .then(res => {
          for (let station of res.data.stations) {
            this.stations.push(station)
          }
          return res.data.stations
        })
        .catch(error => {
          console.log(error)
        })
    }
}

computed: {
    getStationsAsync () {
      return Promise.promisify(this.getStations)
    }
  }
1 Answers

You need to return the result of the axios call, which is a promise.

getStations () {
  return axios
    .get('/api/network/' + this.selectedNetwork.id)
    .then(res => {
      for (let station of res.data.stations) {
        this.stations.push(station)
      }
      return res.data.stations
    })
    .catch(error => {
      console.log(error)
    })
  }
}

Bluebird is uneeccessary. Simply call getStations from createStationMarkers.

Related