【问题标题】:Fetching from rest api vue从rest api vue中获取
【发布时间】:2023-04-09 08:21:02
【问题描述】:

我可能有点愚蠢 :) 但是我已经复制粘贴了数百个解决方案,并尝试了我能想到的所有方法(我对 VUE 和 JS 完全陌生,所以请善待:))

这是我现在拥有的代码。我可以看到它在 F12 中获取数据,但我无法将数据放入可以在函数外部使用的变量中。

我想对我的数据做一些 reponseDataToSession.user.name 等等,或者循环遍历一些数据,但是如果我在我的提取之外使用 console.log,我会得到空或什么都没有。

请帮助我让我的代码在这个小东西上花费一整天。

我得到的错误是:ReferenceError: reponseDataToSession is not defined

这里是代码。

 <template>
    <div id="app">
        <input
                v-model="sessionUUID"
                @keyup.enter="fetchsessions()"
                name="search"
                type="text"
        />

        <input
                @mouseup="fetchsessions()"
                name="serchSubmit"
                value="SÖK"
                type="submit"
        />

        <template v-if="viewData">
            {{responseDataToSession}}
        </template>
    </div>
</template>


<script>
import base64 from "base-64";

export default {
  name: "App",
  data() {
    return {
      sessionUUID: "",
        responseDataToSession: {},
      viewData: false,
    };
  },
  methods: {
    fetchsessions: function () {
      const url = "http://localhost:8080/gethistory";
      const method = "POST"
      const username = "user";
      const password = "bass";
      const body = JSON.stringify({"uuid": "' + this.sessionUUID + '","answers": []});       
      const headers = new Headers();

      headers.append("Content-Type", "application/json");
      headers.append("Authorization", "Basic " + base64.encode(username + ":" + password));
      
      this.responseDataToSession = fetching();
      console.log("1"+this.reponseDataToSession)
      this.viewData = true

      async function fetching() {
        return this.responseDataToSession = await fetch(url, { method, headers, body });
      }

    }
  }
};
</script>

  

【问题讨论】:

  • console.log(reponseDataToSession.sessionSteeps) 应该是console.log(this.reponseDataToSession.sessionSteeps)
  • 无关:reponseDataToSessiondata() 中未正确初始化
  • 更改 console.log,现在我得到 Uncaught (in promise) ReferenceError: response is not defined。关于初始化,请告诉我该怎么做,就像我说我对这一切都很陌生。

标签: vue.js async-await fetch undefined


【解决方案1】:

你有一个ReferenceError: response is not defined,因为你必须在之前声明你的变量响应。所以你应该写:

async function fetching() {
        const  response = await fetch(url, { method, headers, body });
        return response
      }

或者直接(如果您的变量“响应”仅适用于您不需要的函数)

async function fetching() {
        return await fetch(url, { method, headers, body });
      }

对于 responseDataToSession ,请尝试使用 responseDataToSession: {}

【讨论】:

  • 稍微更新了代码。现在我进入未定义的控制台。如果我在我的 html 中写出来,我会得到 [object Promise] 任何想法?
  • 你试过this.responseDataToSession = await fetch(url, { method, headers, body });const body = JSON.stringify({"uuid": "' + this.sessionUUID + '","answers": []}}; 吗??
  • 不,在您的代码中,将const body = '{"uuid": "' + this.sessionUUID + '","answers": []}'; 替换为const body = JSON.stringify({"uuid": "' + this.sessionUUID + '","answers": []}}; ,然后将this.responseDataToSession = fetching(); 替换为this.responseDataToSession = await fetch(url, { method, headers, body });
  • 更新了上面的代码。现在它在 consol 中输入 1undefined 但至少没有错误 :) 并且 html 输出 [object Promise]
  • 你能在headers.append("Authorization", "Basic " + base64.encode(username + ":" + password)); 后面加一个console.logs(headers) 吗?我想看看header 的值。显示控制台的响应
猜你喜欢
  • 2018-08-26
  • 2020-12-27
  • 2021-09-22
  • 1970-01-01
  • 1970-01-01
  • 2023-01-10
  • 2017-05-26
  • 2018-11-28
  • 2015-07-05
相关资源
最近更新 更多