How to successfully use axios without Vue.js CLI (e.g. with JS Fiddle)

user_10591168 0
Viewed 1482

I'm currently in the process of learning vue.js. To understand the dependencies better I'm not using the Vue cli yet but JS fiddle instead. I would now like to consume an API via axios. My HTML looks as follows:

<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>

The Javascript / Vue.js-part looks as follows:

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);
        })
    }
   }
})

The button function itself get executed but I don't get into the promise-function.

Chrome developer tools throws the following error: enter image description here

It would be great if you could help me fixing the API call so that I can work with the response.

Thank you and kind regards

Georg

jsfiddle axios vue.js javascript
3 Answers

The error here is you are trying to access the endpoint using HTTP and not HTTPS enter image description here

Here is a working example of your code in jsfiddle : https://jsfiddle.net/xLu1rtzo/ (I changed http with https)

user_39562050

Change http://www.reddit.com/r/pics.json to 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);
        })
    }
   }
})
user_91762320

I had to use "https" instead of "http" for the API.

user_105911680
Related