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

【问题标题】：Vue axios get http not returning the response dataVue axios 获取 http 不返回响应数据
【发布时间】：2018-12-03 06:02:28
【问题描述】：

我有 data.js 导入 axios 和 VueAxios 如下：

当我在mutations(vuex) 中调用getRecordTypes 函数时，返回未定义。但是当我做控制台日志时，它会返回正确的数据集。

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 新手，不知道我做错了什么？

提前致谢

【问题讨论】：

标签： api vue.js axios vuex

【解决方案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
    })
  }
}

【讨论】：

谢谢，它现在可以工作了，我对这些 vuex 概念了解不多。感谢您让我了解更多细节。

【解决方案2】：

您的结果变量是使用“let”关键字定义的。这意味着他只能在 getRecordTypes 范围级别上使用，因此您不能在您的 axios 承诺中重新分配他。

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

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

【讨论】：

谢谢杰里米，但我得到了相同的结果。控制台日志返回数据，但当我调用不返回任何内容的方法时不返回。我已经更新了我的问题以供您参考。
嗯，我想问题出在你的突变上。尝试 console.log(data);并告诉我它返回了什么。也许使用 data.result 可以访问结果值，但我不确定。