• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue路由切换取消上一个路由未完成的axios请求

同事写的,我也是借花献佛,顺带做个笔记

axios拦截器添加取消请求的方法

因为我们需要在路由进入前判断有没有存在取消请求的方法,所以需要一个存储介质,选用数组,然后存放在vuex中,一是方便动态追踪,二是本来就在axios和router里面import了vuex,就没必要添加window的全局变量了。

import axios from "axios";
import store from "./store";  //vuex


//拦截器
api.interceptors.request.use(config => {
  //设置取消请求的CancelToken
  config.cancelToken = new axios.CancelToken(cancel => {
    //存入vuex数组
    store.commit("pushAxiosPromiseArr", cancel);
  });

  return config;
});

vuex代码

export default {
  state: {
    axiosPromiseArr: [], //请求的axios
  },
  getters: {
    axiosPromiseArr(state) {
      return state.axiosPromiseArr;
    }
  },
  mutations:{
    pushAxiosPromiseArr(state, value) {
      state.axiosPromiseArr.push(value);
    },
    setAxiosPromiseArr(state, value) {
      state.axiosPromiseArr = value;
    },
  }
}

路由进入前取消等待中的请求

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from "./store";  //vuex

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [...]
});

//路由守卫 进入前
router.beforeEach((to, from, next) => {
  //路由跳转之前,中止还在等待的请求
  store.getters.axiosPromiseArr.forEach((cancel) => cancel());
  store.commit("setAxiosPromiseArr", []);

  next();
})

具体代码自己按照自己的项目调整,这里说一下取消axios请求后会进入error方法,所以建议每个api请求后面都接一个catch捕获错误,你可以不处理这个错误,但是一定要catch捕获,不然全局会抛出取消请求的错误对象。

具体请看本博客的axios取消请求的文章。

4
  • 本文分类:vue 项目实战
  • 本文标签:vueroutervuex路由axios取消请求
  • 流行热度:已超过 130 人围观了本文
  • 最后更新:2021年01月29日 - 17时51分45秒
  • 发布日期:2021年01月29日 - 17时51分45秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码