javascript - 如何在没有 Vue.js CLI 的情况下成功使用 axios(例如，使用 JS Fiddle)

Question

我目前正在学习 vue.js。为了更好地理解依赖关系，我没有使用 Vue cli，而是使用 JS fiddle。我现在想通过 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 开发者工具抛出以下错误:

如果您能帮助我修复 API 调用，以便我可以处理响应，那就太好了。

谢谢你和亲切的问候

乔治

Answer 1

此处的错误是您正在尝试使用 HTTP 而不是 HTTPS 访问端点

这是您在 jsfiddle 中的代码的工作示例:https://jsfiddle.net/xLu1rtzo/(我把http改成了https)