Vue Axios получить http, не возвращая данные ответа - PullRequest
Новая
       8

Vue Axios получить http, не возвращая данные ответа

0 голосов
/ 24 июня 2018

У меня есть data.js, импортирующий axios и VueAxios, как показано ниже:

Когда я вызываю функцию getRecordTypes в mutations(vuex), возвращается неопределенное значение.Но когда я веду консольный журнал, он возвращает правильный набор данных. 

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

let BASE_URL = 'http://localhost:3000'
const API_URL = `${BASE_URL}/api/v1/`

export default {
  getRecordTypes () {
    let results = []
    let url = `${API_URL}record_types`
    axios.get(url).then((response) => {
      console.log(response.data) // return the actual arrary of data
      results = response.data
      return results
    }).catch(error => { console.log(error) })
  }
}

В моем файле vuex mutations js я импортировал указанный выше файл data.js, как показано ниже: 

import data from '@/lib/api/data'

export default {
  setRecordTypes (state) {
    console.log(data.getRecordTypes())  // return undefined
    state.recordTypes = data.getRecordTypes()
  }
}

Я новичок в Vue JS и не уверен, что я делаю не так?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

getRecordTypes() ничего не возвращал, также является асинхронной функцией, фактически возвращает объект Promise.

Все методы axios возвращают Promise объект, а не прямой результат ответа. Если вы сначала поймете основы async и Promise, это облегчит обучение:) 

// data.js
export default {
  getRecordTypes () {
    let url = `${API_URL}record_types`
    // add return
    return axios.get(url).then((response) => {
      console.log(response.data) // return the actual arrary of data
      results = response.data
      return results
    }).catch(error => { console.log(error) })
  }
}

// mutations.js
import data from '@/lib/api/data'

export default {
  setRecordTypes (state) {
    // async
    data.getRecordTypes().then(results => {
      state.recordTypes = results
    })
  }
}
0 голосов
/ 24 июня 2018

Ваша переменная результата определяется с помощью ключевого слова let.Это означает, что он доступен только на уровне области действия getRecordTypes, поэтому вы не можете переназначить его в своем обещании axios.

Вам необходимо назначить результат в обещании разрешения следующим образом: 

axios.get(url)
.then(response => {
  let result = [];
  result = response.data;
  console.log(result);
})
...