一、项目背景

短信发送列表页面，由三部分组成，搜索条件，列表，页码。因为当前列表是大数据来源数据，数据多达70亿数据，所以接口请求时间在一分钟作用，每次请求一百条数据

1.大数据接口请求优化（5S请求一次）

res.data中有个一个jobId,请求带上jobId就会继续当前的查询，如果想取消当前的查询，请求参数中带上一个oldJobId参数，就是上一个查询的jobId

 dataTimes(){
    
    
后端接口(参数).then(res => {
    
    
    if (resp.code == 200) {
    
    
        if(resp.data.status==1){
    
     //请求成功
           this.productList=[...this.productList,...resp.data.list]
           //把请求的数据存到localStorage中的smsSendDate里面
            this.nextContentPage=true //是否是第一个点击11页
            this.curClick=false //离开当前页面是否在请求
            //离开当前页面会保留上面两个flag
            
            //100条数据+1是为了显示第11页的页码
            this.page.totalCount = this.productList.length+1
        }else{
    
    
             //计时器5s请求一次
             this.getDate = setTimeout(this.dataTimes, 5000);
        }
    } else {
    
    
        this.$message.warning(resp.message)
    }
})
},

2.点击页码请求flag来判断

点击11页需要发起新的请求，每次请求会请求100条数据，请求参数是sendPageNum=1，以后++。而且当离开当前页面时候也要保持当前页面的状态，页面和请求接口

//初始时候curClick:false，离开当前页没有请求接口
//nextContentPage:true,没有点击请求新页

//截取对应当前页的数据
 getCurList(){
    
    
     this.curProductList=JSON.parse(localStorage.getItem("smsSendDate"));
     this.curProductList= this.curProductList.splice((this.page.pageNum-1)*this.page.pageSize,this.page.pageSize)
   },

//点击页面对应的逻辑
 getPageChange(){
    
    
	if(this.curClick){
    
     //curClick这个falg是判断离开当前页面是否在请求状态，true是请求状态
	         if((this.page.pageSize*this.page.pageNum)>this.productList.length){
    
     //点击十一页（1*11>101）
	         this.curProductList=[[]] //当前页数据是【】
	         this.nextContentPage=false //说明11页已经在请求了
	         }else {
    
    
	         //点击第十页，需要在100条数据中截取
	             this.nextContentPage=false
	             if(this.productList){
    
    
	             this. getCurList() //截取对应当前页的数据
	             }
	         }
	     }else{
    
    
	         this.curClick=false
	         if((this.page.pageSize*this.page.pageNum)>100*this.sendPageNum && this.nextContentPage){
    
    
	         //点击了11页，nextContentPage=false当前页已经在请求数据了
	                 this.nextContentPage=false//存到localStorage
	                 this.curProductList=[[]]
	                 this.sendPageNum++
	                 this.getDateFun()//请求列表的接口
	             }else {
    
    
	             this.getCurList()//截取对应当前页数据
	             }