关于vue axios 进行长轮询思路和中断请求方法

长轮询一般是采用递归的方法去写，像vue种axios 就是在请求成功后进行轮询，获取新的数据状态举个栗子：随便一个vue文件XXX.vue<template><div></div></template><sciipt>import axios from 'axios';export default{data(){return{timeOb

Cold__Star

4258人浏览 · 2020-08-22 15:00:25

Cold__Star · 2020-08-22 15:00:25 发布

长轮询一般是采用递归的方法去写，像vue种axios 就是在请求成功后进行轮询，获取新的数据状态
举个栗子：
随便一个vue文件
XXX.vue

<template>
	<div></div>
</template>
<sciipt>
import axios from 'axios';
export default{
	data(){
		return{
			timeObj:null,
			isLoading:false,
			quxiao:null,
			quxiaoStatu:null
		}
	},
	created(){
		//创建的时候去获取数据
		this.getView()
	},
	//离开页面的时候需要取消正在请求的接口
  beforeDestroy(){
    if (this.isLoading) {
      this.quxiao('cancel')
    }
    if (this.quxiaoStatu) {
      this.quxiaoStatu('cancel')
    }
    if (this.timeObj) {
      clearTimeout(this.timeObj)
    }
    
  },
	methods:{
		//长轮询
		longPoll(){
			let that = this
      		if (this.timeObj) {
        		clearTimeout(this.timeObj)
      		}
      		console.log('开始轮询')
      		this.getStatu().then(()=>{
      			console.log('请求成功 轮询')
      			this.$nextTick(()=>{
      				this.timeObj = setTimeout(() => {
            			this.longPoll()
          			}, 1000*5);
      			})
      		})
		},
		//获取更新状态
		getStatu(){
			let that = this
	    	let CancelToken = axios.CancelToken
	    	return this.$http.get("/demo/doorlist/roomDoorStatus",{
	    		params:{
	    			xxx:xxx
	    		},
	    		cancelToken:new CancelToken(function executor(c){
           			 that.quxiaoStatu = c
          		})
	    	})
		},
		getView(){
			this.isLoading = true
			let that = this
			//用于中断请求
			let CancelToken = axios.CancelToken
			this.$http.get("你自己的api接口地址",{
				params:{
					xxx:xxx
				},
				cancelToken:new CancelToken(function executor(c){
            		that.quxiao = c
          		})
			}).then((res)=>{
				this.isLoading = false
				//请求来数据后开始轮询
				this.longPoll()
			})
		}
	}

}
</script>

整个轮询的思路就是拿到数据，自定义多少秒后再去调用自身，主要是调用自身前需要判断是否有这个定时器，不然会定时器累加
下面说一说axios中断请求方法
get请求

data(){
return{
	quxiao :null,
	quxiaoPost:null
}
}
methods:{
	axiosGet(){
		let that = this
		let CancelToken = axios.CancelToken
		this.axios.get('xxx',{
			params:{
				xxx:xxx
			},
			cancelToken:new CancelToken(function executor(c){
           		that.quxiao= c
     		})
		})
	},
	axiosPost(){
		let that = this
		let CancelToken = axios.CancelToken
		this.axios.post('xxx',{
			xxx:xxx
		},
		{
			cancelToken:new CancelToken(function executor(c){
           		that.quxiaoPost= c
     		})
		}
		)
	}
}
/** 调用的时候就 this.quxiao('cancel')
* this.quxiaoPost('cancel')
*/

需要注意的是 get的cancelToken写在params对象同级
post的cancelToken 写在请求的同级对象