时间戳

首页 > 解决方案 > Vue axios 获取 http 不返回响应数据

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

问题描述

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

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

提前致谢

标签： apivue.jsaxiosvuex

解决方案

getRecordTypes()没有返回任何东西，也是异步函数，实际上返回一个Promise对象。

axios返回对象的所有方法Promise，而不是响应的直接结果。如果您首先了解asyncand的基础知识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
    })
  }
}

推荐阅读