vue中路由跳转取消上一路由(页面)的请求

简介: https://juejin.cn/post/7101501418539843591/ vue中路由跳转取消上一路由(页面)的请求

项目开发过程中经常遇到一种问题,就是进入某个页面,然后由于网速的原因,请求的接口迟迟不响应或是进入某个页面然后直接返回,但是请求还在继续着,等在某个页面浏览时,你要是做了全局的错误请求的拦截的话,你的请求因失败忽然弹出提示,便显得那么的不合时宜,明明当前页没有错误。那么怎样解决或优化请求呢。

解决思路:
image.png

下面跟着我一起来实践
第一种,适合项目里没有使用vuex的
1、设置存储数组

// mian.js
Vue.prototype.$axiosPromiseArr = [];

2、设置请求拦截

import Vue from 'vue'
import axios from 'axios'

//在发送请求设置cancel token
axios.interceptors.request.use(config => {
  config.cancelToken = new axios.CancelToken(function (cancel) {
    Vue.prototype.$axiosPromiseArr.push({
      cancel
    });
  })
  return config
}, err => {
  return Promise.reject(err);
})

3、 监听路由变化清除请求

router.beforeEach(function (to, from, next) {
  Vue.prototype.$axiosPromiseArr.forEach((ele, index) => {
    ele.cancel();
    delete Vue.prototype.$axiosPromiseArr[index];
  });
  next()
})

另一种方案大同小异,只不过项目中用了vuex的更适合
1、设置请求拦截

import axios from 'axios'
import { store } from './store'    // 引入vuex
 
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(function (cancel) {
      store.commit('pushAxiosPromise', {cancelToken: cancel})
    })
    return config
  }
)

2、vuex中设置清空方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
  state: {
    axiosPromiseArr: [] // 取消请求数组
  },
  mutations: {
    pushAxiosPromise (state, payload) {
      state.axiosPromiseArr.push(payload.cancelToken)
    },
    clearToken ({ cancelTokenArr }) {
      axiosPromiseArr.forEach(item => {
        item.cancel();
      })
      axiosPromiseArr = []
    }
  }
})

3、监听路由变化

router.beforeEach(function (to, from, next) {
    store.commit('clearToken') // 取消请求
    next()
})
结束语:关注我,少走弯路! 创作不易,转载请注明出处!

image.png

相关文章
|
28天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
4天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
28天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
28天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
149 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
152 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
242 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
前端开发 Java 关系型数据库
前后端分离Springboot+Vue实现课程社区管理系统
本项目主要实现一个基于课程选课的社区交流系统,主要的业务背景为每个老师可以自己开设相应的选修课,并指定可以选修的人数,学生登陆系统后可以进行选课,并可以在线针对自己的选课进行在线讨论,点赞等互动行为。管理员则主要是对基本信息的相关管理,比如用户和角色、权限管理等,本系统有着完备的权限管理控制系统,可以根据需要自定角色并分配相应的权限。系统采用前后端分离开发的方式来实现。
184 0
前后端分离Springboot+Vue实现课程社区管理系统
|
JavaScript
Vue课程52命令v-if和v-show的区别
Vue课程52命令v-if和v-show的区别
142 0
Vue课程52命令v-if和v-show的区别
|
JavaScript
Vue课程45-事件绑定v-on指令的简写模式
Vue课程45-事件绑定v-on指令的简写模式
149 0
Vue课程45-事件绑定v-on指令的简写模式