如何将数据加载到 Vue 组件中

Question

我在 localhost 上有一个用于 https 的 API 端点，它提供原始 json 数据，如下所示：

[{"day":"Monday","hours":43,"date":"2019-12-23T14:38:08.2112312-05:00"},{"day":"Tuesday","hours":36,"date":"2019-12-24T14:38:08.2130238-05:00"},{"day":"Wednesday","hours":39,"date":"2019-12-25T14:38:08.2130318-05:00"},{"day":"Thursday","hours":34,"date":"2019-12-26T14:38:08.2130329-05:00"},{"day":"Friday","hours":42,"date":"2019-12-27T14:38:08.2130338-05:00"}]

我不明白为什么 VUE.js 失败，"TypeError: "NetworkError when attempting to fetch resource." JSON 正在被 localhost 使用，并且 cors 已启用。来自邮递员、浏览器、curl 等的任何获取请求都可以正常工作。只有当 VUE.js 调用 fetch() 时才会失败。

VUE 组件：

<template>
  <div class="container">
    <LineChart v-if="loaded" :chartdata="chartdata" :options="options" />
  </div>
</template>

<script>
import LineChart from './LineChart.vue';

export default {
  name: 'LineChartContainer',
  components: { LineChart },
  data: () => ({
    loaded: false,
    chartdata: null,
  }),
  async mounted() {
    this.loaded = false;
    try {
      const { daysWorked } = await fetch(
        'https://localhost:5001/api/timeworked',
      );
      console.log('days worked data:', daysWorked);
      this.chartdata = daysWorked;
      this.loaded = true;
    } catch (e) {
      console.error("Couldn't access data:", e);
    }
  },
};
</script>

感谢任何想法、建议或提示！

Answer 1

这不是 Vue 的问题。这是您获取方式的问题。

看看https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API和https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

试试

...
const { daysWorked } = await fetch('https://localhost:5001/api/timeworked')
                                 .then(r=>r.json());
...

这应该会有所帮助。