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

我在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。”

JSON正在为本地主机使用进行测试，并且cors已经启用。来自邮递员、浏览器、curl等的任何get请求都可以正常工作。只有当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>

从“/LineChart.vue”导入线形图；
导出默认值{
名称：“LineChartContainer”，
组件：{LineChart}，
数据：（）=>({
加载：false，
chartdata:null，
}),
异步装入（）{
this.loaded=false；
试一试{
const{daysWorked}=等待获取(
'https://localhost:5001/api/timeworked',
);
console.log（'days worked data:'，daysWorked）；
this.chartdata=daysWorked；
this.loaded=true；
}捕获（e）{
console.error（“无法访问数据：”，e）；
}
},
};

---

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

这不是Vue的问题，而是您获取信息的方式的问题

看一看

试一试

。。。
const{daysWorked}=wait fetch（'https://localhost:5001/api/timeworked')
.then（r=>r.json（））；
...

---

这应该会有帮助。

您的localhost/dev env是否设置为支持

https

？@AndrewNolan当然是这样，尽管我也尝试过禁用它，但没有成功。尝试添加fetch（“”，{mode:'cors'））或者“no cors”idk您的服务器是如何配置的。还可以查看DevTools网络选项卡以了解导致问题的原因。实际上，它只是缺少json方法上的（）。因此，r.json（）完成了这项任务，谢谢。