vue项目中flag的作用

一、项目背景

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

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

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

 dataTimes(){
后端接口(参数).then(res => {
 if (resp.code == 200) {
   this.nowId=resp.data.jobId
     if(resp.data.status==1){
      //把请求的数据存到localStorage中的smsSendDate里面
         this.productList = [ ...this.productList,...resp.data.list]
         localStorage.setItem("smsSendDate", JSON.stringify(this.productList));
         this.nextContentPage=true //是否是第一个点击11页
         this.curClick=false //离开当前页面是否在请求
         //离开当前页面会保留上面两个flag
           if(this.productList.length ==100*this.searchParams.pageNum){
               this.page.totalCount = this.productList.length+1
               if(resp.data.list.length==0){
                 //   this.curProductList=[]
                  this.page.pageNum=this.page.pageNum-1
                   this.page.totalCount = this.productList.length
                }
          }else{
              this.page.totalCount = this.productList.length
          }
          this.getCurList()
         this.nowId=''
         this.searchParams.oldJobId=''
         this.renow()
     }else if(resp.data.status==2){
          this.productList = []
         this.page.totalCount = 0
          this.nowId=''
         this.searchParams.oldJobId=''
          this.renow()
         this.$message({ message: resp.data.statusMessage, type: 'warning' })
     }else{
         this.searchParams.jobId=resp.data.jobId
          this.getDate = setTimeout(this.dataTimes, 5000);
     }
 } else {
     this.$message.warning(resp.message)
 }
})
},

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

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

点击11页时候需要发起新的请求，我需要一个flag来判断是否发起请求，curClick：false（没有发起请求）来判断离开当前页的时候，是否在请求，还需要一个nextContentPage：true（没有点击11页）来判断是否第一次点击在11页，第一次点击请求，第二次点击就不发起新请求；

//初始时候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()//截取对应当前页数据
	             }