Vue组件加载数据的方法

Question

我在本地主机上有一个用于 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 正在保存以供本地主机使用，并且已启用 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 and 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());
...

这应该有所帮助。

Vue组件加载数据的方法

How to load data into Vue component

vue.js

fetch-api

vue-component

vuejs2