如下所示:
- vue.prototype.$ajax = axios;
- const CancelToken = axios.CancelToken;
- let cancel;
- let cancelAjaxText = '中断成功';
- Vue.prototype.post = function(url, data, loading) {
- var ajax = Vue.prototype.$ajax({
- method: 'post',
- url: url,
- data: data,
- cancelToken: new CancelToken(c = >{ // 强行中断请求要用到的
- cancel = c
- })
- }).then(res = >res.data, res = >{ // 中断请求和请求出错都会走这里, 我这里用 cancelAjaxText 来区别
- if (res.message == cancelAjaxText) {
- return {
- status: false,
- msg: cancelAjaxText
- }
- } else {
- this.$confirm('登录过时, 是否重新登录', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() = >{
- window.location.href = Vue.prototype.url_head + '/';
- }).
- catch(() = >{});
- }
- }) return ajax;
- };
接入 axios , 在 POST 方法里加入 cancelToken 数据, 在上面 else 中, 中断请求和请求出错都会走那里, 所以用一个 msg 来识别 (因为接口返回中也有一个 msg, 统一一下);
以下是 中断请求的方法, 放在 路由切换的监听 router.beforeEach 中 ,cancel 是中断的方法, 在 post 的 cancelToken 里面拿出来的
- Vue.prototype.cancelAjax = function(){ // 切换页面强行中断请求 router.beforeEach 中用到
- if(cancel){
- cancel(cancelAjaxText);
- }
- }
- router.beforeEach((to, from, next) => {
- <span style="white-space:pre;"> </span>Vue.prototype.cancelAjax()
- next();
- });
调用 post
- <span style="white-space:pre;"> </span>this.post(this.ajaxUrl + 'getCrTree',{
- devAddr : this.changeData.devAddr,
- innerId : this.changeData.innerId,
- }).then(ret=>{
- if(ret.status){
- }else{
- this.msg(ret.msg);
- }
- })
来源: http://www.jb51.net/article/135918.htm