如何使用 this.$http.get() 从 url 获取 json 数据？

Posted 2023-02-22

【中文标题】如何使用 this.$http.get() 从 url 获取 json 数据？

【英文标题】：How can I get json data from a url using this.$http.get()?

【发布时间】：2019-11-22 01:19:33

【问题描述】：

我是 vuejs 新手，请帮我解决这个问题-

this.$http.get() is not working. 

我试过了-

npm install vue-resource

和

npm install vue-resource --save

然后我写了这段代码

<template>
    <v-container>
         questionData 
    </v-container>
</template>



data () 
return 
  questionData: [],



mounted () 
 this.$http.get('http://api.iqube.org.in/questions').then(response => 

    this.questionData = response.body;
    console.log(response.body)
  , error => 

  );

控制台日志显示未定义。

这就是我的 main.js 的样子

import Vue from 'vue';
import router from './router';
import store from './store';

import './plugins/vuetify';
import './plugins/axios';

import './registerServiceWorker';

import App from './App.vue';

import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.config.productionTip = false

new Vue(
  router,
  store,
  render: h => h(App)
).$mount('#app')

我是在导入不需要的东西吗？

所有问题数据都应显示在页面中。但我得到一个空白页。我也在控制台中收到此错误

Cannot redefine property: $http

【问题讨论】：

axios 是一个通常用于 GET、POST 和其他操作的库。你可能想看看它。 ofc 在更简单的服务请求中可能没有必要，但由于其响应解析功能，它将大大简化您的代码。

“控制台日志显示未定义。” console.log 显示 什么 未定义？

@ceejayoz 最有可能response.body

@mcy 很有可能，我敢打赌 OP 需要在那里使用response.data。

我仍然收到此错误：vue-resource.esm.js?28dd:1520 Uncaught TypeError: Cannot redefine property: $http at Function.defineProperties () at plugin (vue-resource .esm.js?28dd:1520) 在 Function.Vue.use (vue.runtime.esm.js?2b0e:5103) 在 eval (main.js?56d7:14) 在 Module../src/main.js ( app.js:7574) 在 webpack_require (app.js:724) 在 fn (app.js:101) 在 Object.1 (app.js:7948) 在 webpack_require (app.js:724) 在 app.js:791

【参考方案1】：

在调试您的应用程序后，我发现您在您的 dailypractice.vue 组件上重新定义（重新导入）Vue 以及 VueAxios/ axios... 如果您打算使用 vueResource，请不要不需要axios（我推荐 axios 作为 Vue 开发人员）

// dailypractice.vue
  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  Vue.use(VueAxios, axios)

只需从您的dailypractice 组件中删除之前的代码，并从您的项目（axios.js 文件）中删除axios / VueAxios，您的应用就可以正常运行了。

【参考方案2】：

你需要定义this.$httproot：

import Vue from 'vue';
import router from './router';
import store from './store';
import App from './App.vue';

import VueResource from 'vue-resource';

Vue.use(VueResource);
Vue.config.productionTip = false

new Vue(
  router,
  store,
  render: h => h(App)
).$mount('#app')

 Vue.http.options.root = 'http://api.iqube.org.in/';

然后在你的挂载和任何你包含this.$http的地方添加你想要定位的路线......像这样：

mounted () 
    this.$http.get('/questions').then(response => 
    this.questionData = response.body;
    console.log(response.body)
    , error => 

  );

【讨论】：

github.com/boidurja/mobileAppOnGithub.git 这是我在 github 中的项目的链接。谁能找出问题所在？我将不胜感激。

@BoidurjaTalukdar 是的，兄弟，我现在会检查您的问题.. 并发布另一个答案和解决方案

【参考方案3】：

不要忘记导入 axios 并在 main.js 中使用它。

import axios from 'axios'

Vue.use(axios)