目录

问题：

需求：

实现思路：

具体实现：

1.使用vuex数据共享来充当记录集合 【store/request.js文件】

2.在请求拦截器或配置中将请求任务添加至集合【request/config.js文件】

3.全局添加拦截器，在页面跳转成功后将之前的任务终止及清空【App.vue文件】

---

问题：

1.当一个页面中并发请求很多，而这个页面很多情况下只是一个中转跳转下一个页面后，中转页面中的请求依然在继续请求，影响目标页面的请求速度或导致大量的请求进入排队！

2.例如：要去到订单页，需要经过个人中心页，个人中心页的接口请求非常多，到达订单页后，个人中心页中未完成的请求还在继续执行...

需求：

在跳转新页面后，终止上一个页面或之前页面的所有未完成的请求，只进行新页面中的请求！

实现思路：

1.使用一个集合记录请求的任务队列，当发起一个请求时，将请求任务添加到集合

2.*请求结束后将对应任务移除（可处理可不处理， 案例中为了简单没有处理）

3.在页面跳转后终止集合中所有未完成的任务并清空集合

具体实现：

说明：案例项目使用的是uniapp的第三方库uView2.0.33版本，请求使用了库中集成的

Http请求 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)https://www.uviewui.com/js/http.htmlluch-requesthttps://www.quanzhan.co/luch-request/

1.使用vuex数据共享来充当记录集合 【store/request.js文件】

const state = {
	requestTaskList: [],//请求任务集合
}
const mutations = {
	//添加记录
	addTask(state, data) {
		state.requestTaskList.push(data)
	},
	//移除记录
	removeTask(state, data) {
		state.requestTaskList = state.requestTaskList.filter(item => item.uniqueId != data.uniqueId)
	},
	//终止并请求记录
	clearList(state, data) {
		state.requestTaskList.forEach(item => item.abort())
		state.requestTaskList = []
	}
}
export default {
	namespaced: true,
	state,
	mutations,
}

2.在请求拦截器或配置中将请求任务添加至集合【request/config.js文件】

import { baseRequestUrl, serviceInstID, authToken } from '@/common/config'
import store from '@/common/store'
// config 为默认全局配置
uni.$u.http.setConfig((config) => {
	config.baseURL = baseRequestUrl
	config.header = {
		serviceInstID,
		AuthToken: authToken,
	}
	config.getTask = (task) => {
		//将请求任务添加至记录
		store.commit('request/addTask', task)
	}
	return config
})

*uniapp中的请求任务对象获取请参考：

*uView2中的请求任务对象获取请参考 

3.全局添加拦截器，在页面跳转成功后将之前的任务终止及清空【App.vue文件】

<script>
	export default {
		onShow(options) {
			//拦截器
			uni.addInterceptor('navigateTo', {
				success:()=> {
					this.$store.commit('request/clearList');
				}
			})
		},
		onHide() {
			//拦截器
			uni.removeInterceptor('navigateTo')
		},
		
	};
</script>