当前位置:首页 » 《关注互联网》 » 正文

vue页面跳转取消上一个页面请求_见贤思齐焉,见不贤内自省

18 人参与  2021年08月24日 08:03  分类 : 《关注互联网》  评论

点击全文阅读


核心:

1:vuex以数组的形式存放取消函数;
2:axios请求拦截中设置cancelToken;
3:页面跳转路由守卫取消上一个页面所以的请求。

vuex中

在vuex中设置一个存放取消函数的数组,还有一个添加数组元素的方法和清空数组的方法:

这里放到了自定义的home模块:

export default {
/**
* 定义命名空间,防止多个模块同名共享,使用时需要带上命名空间
*/
    namespaced: true,
    state: {
        _axiosPromiseArr:[],
    },
    mutations: {
        add_AxiosPromiseArr(state, item) {
            console.log("添加_axiosPromiseArr");
            state._axiosPromiseArr.push(item)
        },
        clear_AxiosPromiseArr(state) {
            console.log("_axiosPromiseArr情空");
            state._axiosPromiseArr = []
        },
    },
}

axios的拦截:

import axios from 'axios'
import store from '../../store/index'

let Ajax = axios.create({
    baseURL: "http://127.0.0.1:3003/",
    timeout: 50000
})
Ajax.interceptors.request.use(async config => {

  //重点:重点:重点:重点:重点:重点:重点:重点:重点:
    config.cancelToken = new axios.CancelToken(cancel => {
        store.commit('home/add_AxiosPromiseArr', { cancel })
    })
  //重点:重点:重点:重点:重点:重点:重点:重点:重点:


    return config;
}, error => {
    return Promise.reject(error);
});
Ajax.interceptors.response.use(response => {
    return response.data;
}, error => {
    return Promise.reject(error);
});
const getTIP = (url, params) => {
    Ajax.defaults.headers['token'] = localStorage.getItem('token')
    return new Promise((relove, reject) => {
        Ajax.get(url, { params, responseType: "arraybuffer", headers: { responseType: 'arraybuffer' } }).then(res => relove(res)).catch(err => reject(err))
    })
}
export default {
     getTIP
}

路由守卫:

router.js

router.beforeEach((t, f, n) => {
    store.state.home._axiosPromiseArr.forEach((ele, index) => {
        ele.cancel("跳转页面,结束请求") // 路由跳转之前,清空(终止)上一个页面正在请求的内容
    })
    store.commit('home/clear_AxiosPromiseArr')
    if (t.path.includes('login') || t.path.includes('zjq')) {
        n()
    }
    if (!localStorage.getItem('token')) {
        n('/login')
    } else {
        n()
    }
})

点击全文阅读


本文链接:http://zhangshiyu.com/post/26032.html

重点  数组  跳转  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • (此去经年无故人)南初陆南城:结局+番外精品选集起点章节+阅读即将发布预订
  • 沈凝夏叶晚怡附加完整在线阅读(归雁不栖故人枝)最近更新列表
  • 剧情人物是时初,白浩雄的玄幻言情小说《召诸神,踏万界,天命帝女逆乾坤》,由网络作家&ldquo;海鸥&rdquo;所著,情节扣人心弦,本站TXT全本,欢迎阅读!本书共计381345字,185章节,:结局+番外免费品鉴:结局+番外评价五颗星
  • 凤青禾,江明远,***枢小说(别人修仙我捡漏,卷王们破防了)最近更新(凤青禾,江明远,***枢)整本无套路阅读
  • 薛梨小说无删减+后续(曾经亲情似草芥)畅享阅读
  • 沈南栀小说(穿越时空,我要修补时空裂缝)章节目录+起点章节(沈南栀)全篇清爽版在线
  • 未婚妻被巨蟒缠身,我该吃就吃该喝就喝前言+后续_阿豪林月周然后续+番外_小说后续在线阅读_无删减免费完结_
  • 陆骁,陆本初小说(陆骁,陆本初)(癫!睁眼穿成老太太挥鞭***逆子)前传+阅读全新作品预订
  • 姐姐含冤而死后冥王另娶,我杀穿整个地府在线阅读_阎罗殿殷红别提一口气完结_小说后续在线阅读_无删减免费完结_
  • (书荒必看)毒后重生:疯王的神医小娇妻沈清歌,萧绝:+后续热血十足
  • 重生后我和太监联手灭了敌国喻辰,林雪续集(重生后我和太监联手灭了敌国)终极反转(喻辰,林雪)全篇一口气阅读
  • 我不做灵媒后,自称灵媒摆渡人的养妹害怕了内容精选_苏晓霍老阿姐无广告_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1