如何在没有Vue.js CLI的情况下成功使用axios（例如，使用JS Fiddle）

Question

我目前正在学习vue.js。为了更好地理解依赖关系，我现在是n 使用Vue cli的ot，但是用JS来代替。我现在想通过axios使用API​​。我的HTML如下所示：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
<form v-on:submit.prevent>
   <input type="text" v-model="input">
   <button @click="invoke">Please click here</button>
</form>
<p>{{result}}</p>
</div>

Javascript / Vue.js部分的外观如下：

new Vue({
    el:"#app",
   data:{
    input: null,
      result: null,
   },
   methods: {
      invoke(){
         console.log("in function 'invoke'")
         axios.get("http://www.reddit.com/r/pics.json").then( function(response){
            console.log("in response-function")
            console.log(response.data);
        })
    }
   }
})

按钮功能本身已执行，但我没有进入promise功能。

Chrome开发者工具会引发以下错误：

如果您能帮助我f [[ixing API调用，以便我可以处理响应，那将非常好。

谢谢您和亲切的问候

乔治

Answer 1

这里的错误是您尝试使用HTTP而不是HTTPS访问端点

这是您在jsfiddle中的代码的有效示例：https://jsfiddle.net/xLu1rtzo/（我用http更改了https）

Answer 2

将http://www.reddit.com/r/pics.json更改为https://www.reddit.com/r/pics.json

new Vue({
    el:"#app",
   data:{
    input: null,
      result: null,
   },
   methods: {
      invoke(){
         console.log("in function 'invoke'")
         axios.get("https://www.reddit.com/r/pics.json").then( function(response){
            console.log("in response-function")
            console.log(response.data);
        })
    }
   }
})

Answer 3

我必须使用“ https”而不是“ http”作为API。