使用 axios.get 条件加载大型 json 文件答案

【问题标题】：Conditional loading of large json files with axios.get使用 axios.get 条件加载大型 json 文件
【发布时间】：2020-10-08 22:29:29
【问题描述】：

使用以下内容获取一个大型 json 文件。它按预期工作，但是，由于 case_data.json 很大，因此页面最多需要两分钟才能呈现。

export default {
    name: "cases",
    data() {
        return {
            columns: ['Case number', 'Summary', 'Name', 'Address'],
            cases: []
        };
    },
    methods: {
        fetchData(){
                axios.get('/case_data.json').then(response => {
                this.cases = response.data;
            })
        }
    },
    created(){
        this.fetchData();
    }
};

它包含几个月的案例，因此我们的想法是将其分解为每日或每周数据部分，并仅导入当时需要的数据。期望是提高性能。我想将输入参数传递给 fetchData() 并加载一个较小的数据集。下面的方法有意义吗？ fetchData() 代码是否正确？

export default {
    name: "cases",
    props: {
      day: {
          required: true,
          type: String
      }
    },
    data() {
        return {
            columns: ['Case number', 'Summary', 'Name', 'Address'],
            cases: []
        };
    },
    methods: {
        fetchData(this.day){
            if(this.day == 'day1') axios.get('/case_data_day1.json').then(response => {this.cases = response.data;})
            else if(this.day == 'day2') axios.get('/case_data_day2.json').then(response => {this.cases = response.data;})
            ... 
            else if(this.day == 'dayN') axios.get('/case_data_dayN.json').then(response => {this.cases = response.data;})
        }
    },
    created(){
        this.fetchData();
    }
};

【问题讨论】：

这是一个相关的堆栈主题，它提供了一个合适的解决方案来以块的形式加载您的 JSON stackoverflow.com/a/49840505/13745258

标签： json vue.js axios

【解决方案1】：

改用下面的代码，它是动态的，您不必编写手动条件，它会在this.day 上获取数据并在挂载的钩子上使用fetchData()。

methods: {
    fetchData(){
          let that = this
          axios.get(`/case_data_${that.day}.json`).then(response => {that.cases = response.data;})
        }
    },
    mounted(){
        this.fetchData();
    }

【讨论】：