来自 JSON API 的 VueJs2 HTTP 获取请求答案

【问题标题】：VueJs2 HTTP Get Request from JSON API来自 JSON API 的 VueJs2 HTTP 获取请求
【发布时间】：2018-07-11 15:14:21
【问题描述】：

我正在通过 VueJs 2 从 JSON API 检索数据。我可以使用以下代码从 URL 检索数据。

我的组件是 showGet。我正在使用 jsonplaceholder 数据，它工作正常。但是当我提供我想要的 API (https://news.ontario.ca/newsroom/en.json) 时，它不起作用。这个 API 在 Postman 中运行良好。在我的浏览器中，它显示 JSON 数据。但是，每当我将我的 URL 放入 Vue HTTP 获取请求时，它都不起作用。

它甚至没有显示在console.log(data)。

<script>

export default {

  data(){
    return{
     blogs:[]
    }
  },
  methods:{

  },
  created(){
      this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data){
          console.log(data);
         this.blogs= data.body.slice(0,10);
      })
  }
}
</script>

我的 App.vue 代码如下：

<script>

import showGet from './components/showGet'

export default {
  name: 'App',
  components: {
    showGet
  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

【问题讨论】：

可能您需要在请求中发送与 withCredentials: true 等价的内容
这个问题与跨域请求有关

标签： javascript json api vue.js

【解决方案1】：

我在您的代码中没有发现任何问题

也许你不包括vue-resource（必须使用this.$http）

new Vue({
  el: '#app',
  data() {
    return {
      blogs: []
    }
  },
  methods: {

  },
  created() {
    this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data) {
      //console.log(data);
      this.blogs = data.body.slice(0, 10);
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<div id="app">
  <ul>
    <li v-for="blog in blogs">
      {{ blog.id }} - {{ blog.title }}
    </li>
  </ul>
</div>

【讨论】：