未捕获（承诺中）类型错误：无法读取未定义的属性“协议”

Posted 2023-02-22

【中文标题】未捕获（承诺中）类型错误：无法读取未定义的属性“协议”

【英文标题】：Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined

【发布时间】：2021-01-21 22:21:57

【问题描述】：

我正在尝试将一些数据发布到一个假 API，在这种情况下是 jsonPlaceHolder，其想法是用户可以输入标题和内容，然后通过按下按钮使用 axios 在https://jsonplaceholder.typicode.com/posts 将其发布到此 API但我一直在这个问题的标题中收到错误。

代码如下：

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

这是在运行任何东西之前出现的错误：

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

这是我按下应该将数据发送到 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

我真的不知道问题出在哪里，非常感谢任何有用的信息。 提前致谢。

【问题讨论】：

Vue.use(Axios); ???? Axios 不是一个 Vue 插件，所以你不能像这样使用它。如果您已将 Axios 导入为 axios，则只需使用 axios.post()

这能回答你的问题吗？ axios is not defined in vue js cli

嗯我猜你用错了请检查这个链接github.com/axios/axios/issues/632

@Phil 不幸的是，每次我使用 axios.post() 它都说 axios 没有定义

@AnhDevit 对不起，但也没有用，

【参考方案1】：

axios 不是 Vue 插件，所以你不能像那样使用 axios。相反，您可以像这样创建一个 api 服务模块：

//apis.js
import axios from 'axios'

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

export default api

然后在您要发出请求的文件中

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)
      
    
  

【讨论】：

嗨，谢谢你的帮助，但是这个方法没用，你能告诉我应该在哪个文件夹中创建 api 服务模块（如 src 文件夹或 main.js）

您可以在 src 文件夹中创建一个名为 services 的文件夹，并在 services 文件夹中创建一个名为 api.js 的文件。然后它应该工作。 （这就是我喜欢的方式）