切换路由页面时,中止上个路由页面未返回数据的请求
通常情况下,接口返回数据很快,但万事无绝对
若接口返回数据较慢此时用户快速切换菜单,那么上个路由的请求还处在发送中,为了处理效率,对请求做些处理
vue 项目使用 axios 封装请求,此处要用到 axios 中的 CancelToken
在封装好的请求文件(request.js)中,加入以下内容
/** ...省略的代码 */
const clearRequest = {
source: {
token: null,
cancel: null
}
}
const cancelToken = axios.CancelToken
const source = cancelToken.source()
// 创建 axios 实例
const service = axios.create({
cancelToken: source.token,
baseURL: process.env.BASE_API,
timeout: 6000 // 请求超时时间
})
// request 拦截器
service.interceptors.request.use(
config => {
/** ...省略的代码 */
config.cancelToken = clearRequest.source.token
return config
},
error => {
/** ...省略的代码 */
Promise.reject(error)
}
)
/** ...省略的代码 */
export {clearRequest}
修改路由配置,每次路由变化前执行 cancel 方法,并更新 cancelToken
import {clearRequest} from '@/utils/request'
import axios from 'axios'
/** ...省略的代码 */
router.beforeEach((to, from, next) => {
/** ...省略的代码 */
// 切换路由时清空上个路由未完成的所有请求
const cancelToken = axios.CancelToken
clearRequest.source.cancel && clearRequest.source.cancel()
clearRequest.source = cancelToken.source()
/** ...省略的代码 */
}