Question

我有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的新手，不确定我在做什么错吗？

预先感谢

Answer 1

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
    })
  }
}

Answer 2

您的结果变量由'let'关键字定义。这意味着他仅在getRecordTypes范围级别可用，因此您不能在axios承诺中重新分配他。

您需要像这样在解决承诺中分配结果：

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

Vue axios获取http不返回响应数据

2 个答案: