3

I'm trying to post some data to a fake API which in this case is jsonPlaceHolder and the idea is that the user can enter a title and content and post it to this API at https://jsonplaceholder.typicode.com/posts using axios by pressing a button but i keep getting the error in the title of this question.

here is the code:

<template>
  <div>
    <h1>it 2020 people</h1>
    <p>type in your title</p>
    <input type="text" v-model="title" />

    <p>type your content</p>
    <textarea cols="30" rows="1" v-model="body"></textarea>

    <h3>your title is {{ title }}</h3>
    <h3>your content is {{ body }}</h3>

    <button v-on:click="post()">post</button>
  </div>
</template>

<script>
import Vue from "vue";
import Axios from "axios";

Vue.use(Axios);
export default {
  components: {},
  data() {
    return {
      title: "",
      body: "",
    };
  },
  methods: {
    post: function () {
      Vue.axios
        .post("https://jsonplaceholder.typicode.com/posts", {
          title: this.title,
          body: this.body,
          userid: 1,
        })
        .then(function (data) {
          return console.log(data);
        });
    },
  },
};

and this is the error that appears before running anything:

Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
    at isURLSameOrigin (isURLSameOrigin.js?3934:57)
    at dispatchXhrRequest (xhr.js?b50d:115)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js?b50d:13)
    at dispatchRequest (dispatchRequest.js?5270:52)
isURLSameOrigin @ isURLSameOrigin.js?3934:57
dispatchXhrRequest @ xhr.js?b50d:115
xhrAdapter @ xhr.js?b50d:13
dispatchRequest @ dispatchRequest.js?5270:52

and this is the error i get after pressing the button that is supposed to send the data to the API:

[Vue warn]: Error in v-on handler: "TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is not a function"

found in

---> <App> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

I really don't have any clue what is the problem, any helpful information is much appreciated. thanks in advance.

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
Milad
  • 77
  • 1
  • 2
  • 7
  • `Vue.use(Axios);` Axios is **not** a Vue plugin so you cannot _use_ it like this. If you've imported Axios as `axios`, just use `axios.post()` – Phil Oct 07 '20 at 02:07
  • Does this answer your question? [axios is not defined in vue js cli](https://stackoverflow.com/questions/51374367/axios-is-not-defined-in-vue-js-cli) – Phil Oct 07 '20 at 02:11
  • Hmmm I guess you use wrong please check this link https://github.com/axios/axios/issues/632 – Anhdevit Oct 07 '20 at 02:50
  • @Phil unfortunately every time i use axios.post() it says axios is not defined – Milad Oct 07 '20 at 16:31
  • @AnhDevit sorry but also didnt work, – Milad Oct 07 '20 at 16:31
  • everytime i check the internet i see hundreds of ways to run axios and everyone is different and most of them are out dated i really dont know why i keep facing this problem with axios, maybe i should look if there is an alternative to axios until someone hits me with correct solution, I've been suffering for weeks now because im not able to make a post request using axios – Milad Oct 07 '20 at 16:35
  • thanks for the help guys but ii really think this problem needs some further investigation its taking way more time than supposed to in order to work – Milad Oct 07 '20 at 16:39
  • I suggest you read the linked post _very_ carefully and keep in mind that JS variables are case sensitive. `Axios` is not the same as `axios` – Phil Oct 07 '20 at 21:11

2 Answers2

4

axios is not a Vue plugin so you cannot use axios like that. Instead, you can create an api service module like this:

//apis.js
import axios from 'axios'

const api  = axios.create({
  baseURL: 'api.domain.com',
  headers: {
    'Content-Type': 'application/json'
  }
})

export default api

and then in the file where you want to make the request

import api from './services/api'
export default {
  methods: {
    async makeRequest() {
      try {
        const res = await api.get('/endpoint')
        console.log(res)  
      } catch (error) {
        console.error(error)
      }
    }
  }
}
Abbas
  • 1,118
  • 1
  • 11
  • 25
  • hi, thanks for the help but this method didint work, can you please tell me in which folder should i create the api service module in (like src folder or main.js) – Milad Oct 07 '20 at 16:37
  • You could create a folder called `services` in the src folder, and create a file called `api.js` in the `services` folder. Then it should work. (This is how I prefer it) – Abbas Oct 08 '20 at 11:18
0

If you are using vue 2 you do not need to import it into main.js Remove the lines:

import axios from "axios";

Vue.use(axios);

And you are done

Bladimir Aponte
  • 1
  • 1