关于接口时间加载过长，数据单独后台预加载

思路：
当前页面加载24小时数据，加载的时调用方法加载连续3天的数据，查看前一天的数据时，先去缓存中取数据，触发加载前一天的上一天的数据，同时把缓存中的昨天的数据清理掉，始终保持缓存中有3天的数据。由于我的数据时间比一定正好所以，参数时间两头减了几分钟。
创建js文件：

import {
  getDataByTime
} from '@/api/api'
import { getDateStr } from '@/utils/util'

var ChcheData = []
var m_jh = ''
export async function getChcheData(jh, starTime, endTime, selectedConfigureKey) {
  if (getPlusMinutesData(starTime, 1000 * 60 * 5) > new Date()) {
    return null
  }
  console.log('准备进缓存取数据')
  console.log( starTime, endTime,selectedConfigureKey)
  if (m_jh != '' && m_jh == jh) {
    let returnData=[]
    if(ChcheData.length>0){
      returnData= ChcheData.filter(result => new Date(result.time) >= new Date(starTime) && new Date(result.time) <= new Date(endTime))
    }
    if (returnData.length > 0) {
      if (new Date(ChcheData[0].time) <= getPlusMinutesData(starTime, 1000 * 60 * 10) && getCutMinutesData(endTime, 1000 * 60 * 10) <= new Date(getPlusDate(ChcheData[0].time, 24))) {
         fistData(jh, getCutData(ChcheData[0].time, 24), ChcheData[0].time, selectedConfigureKey)
      } else if (new Date(getCutData(ChcheData[ChcheData.length - 1].time,24)) <= getPlusMinutesData(starTime, 1000 * 60 * 10) && getCutMinutesData(endTime, 1000 * 60 * 10) <= new Date(getPlusDate(ChcheData[ChcheData.length - 1].time, 24))) {
        lastData(jh, ChcheData[ChcheData.length - 1].time, getPlusDate(ChcheData[ChcheData.length - 1].time, 24), selectedConfigureKey)
      }
      return returnData
    } else {
      if (ChcheData.length != 0) {
       getInitData(jh, starTime, endTime, selectedConfigureKey)
      }
      return null
    }
  } else {
    getInitData(jh, starTime, endTime, selectedConfigureKey)
    m_jh = jh
    return null
  }
}
function getPlusDate(date, number) {//加小时
  return getDateStr(new Date(new Date(date).getTime() + 1000 * 60 * 60 * number))
}

function getCutData(date, number) {//减小时
  return getDateStr(new Date(new Date(date).getTime() - 1000 * 60 * 60 * number))
}

function getPlusMinutesData(date, number) {//加分钟
  return new Date(new Date(date).getTime() + number)
}

function getCutMinutesData(date, number) {//减分钟
  return new Date(new Date(date).getTime() - number)
}
 async function  getInitData(jh, starTime, endTime, selectedConfigureKey) {
  let f_time=getCutData(starTime,24)
  let t_time=getPlusDate(endTime,24)
   let params = { }

   params = { jh: jh, time1:f_time, time2: getPlusDate(starTime,12), templateId: selectedConfigureKey }
   getDataByTime(params).then((res) => {
     if (res.success && res.result.length > 0) {
       ChcheData=[...res.result,...ChcheData]
     }
   })
   params = { jh: jh, time1:getCutData(endTime,12), time2: t_time, templateId: selectedConfigureKey }
   getDataByTime(params).then((res) => {
     if (res.success && res.result.length > 0) {
       ChcheData=[...ChcheData,...res.result]
     }
   })
}
 function fistData(jh, starTime,endTime, selectedConfigureKey) {
  let params = { jh: jh, time1: starTime, time2: endTime, templateId: selectedConfigureKey }
         getDataByTime(params).then((res) => {
    if (res.success && res.result.length > 0) {
      ChcheData = [...res.result, ...ChcheData].filter(res => new Date(res.time) <= getCutMinutesData(ChcheData[ChcheData.length - 1].time, 1000 * 60 * 60 * 24))
    }
  })
}

async function lastData(jh, starTime,endTime, selectedConfigureKey) {
  let params = { jh: jh, time1: starTime, time2: endTime, templateId: selectedConfigureKey }
  getDataByTime(params).then((res) => {
    if (res.success && res.result.length > 0) {
      ChcheData = [...ChcheData,...res.result].filter(res => new Date(res.time) >= getPlusMinutesData(ChcheData[0].time, 1000 * 60 * 60 * 24))
    }
  })
}

function getDateStr(date) {
  let year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getDate()
  let h = date.getHours()
  let m = date.getMinutes()
  let s = date.getSeconds()
  if (month < 10) {
    month = '0' + month
  }
  if (day < 10) {
    day = '0' + day
  }
  if (h < 10) {
    h = '0' + h
  }
  if (m < 10) {
    m = '0' + m
  }
  if (s < 10) {
    s = '0' + s
  }
  return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s
}

调用:

import {getChcheData } from './cacheData'

let  res=await getChcheData( this.jh,  this.is_back_boolean ? this.getCutData(this.jsonTimeLastTime,24) : this.jsonTimeLastTime,this.is_back_boolean ? this.jsonTimeLastTime : this.getPlusDate(this.jsonTimeLastTime,24),this.selectedConfigureKey,)
if(res && res.length>0){//缓存数据
  this.ChcheData(res)//取得数据

}else {
//没取得数据
  await this.getDataByTime( this.jh, this.selectedConfigureKey, this.time1 ,this.time2).then((res) => {
  
  })
  
}