vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5
axios.defaults.baseURL = baseUrl
var CancelToken = axios.CancelToken;
let cancel;
export const api_prefix = '/face_recognition_app/v1.0';
var error_info={
code:402,
msg:"网络请求发生错误!"
};
//获取人员列表
export const personList = function () {
var args = util.argumentsFmt(arguments);//转换参数
var cancel=null;
Vue.axios.post( api_prefix + '/personquery',args.param,{ cancelToken: new CancelToken(function executor (c) {
cancel = c
})
} )
.then((res) => {
args.callBack(res.data);
})
.catch((e) => {
if (axios.isCancel(e)) {
console.log('Request canceled', e.message);
} else {
error_info.msg=e.message;
args.callBack(error_info);
} })
.finally(() => {
args.final()
})
return cancel;
} .vue文件中
data里添加
cancelList:[]
momethods{
cancelReq:function(){
for(let i=0;i<this.cancelList.length;i++){
if (typeof this.cancelList[i] === 'function') {
this.cancelList[i]();
}
}
},
getList:function (val) {
var _this=this;
if(!val||val==1){
_this.currentPage=1;
}
var param={
pageNum:val?val:1,
size:_this.pageSize
};
_this.cancelList.push(getPerson
personList(param,function (data) {
if(data.code==0){
_this.dataInfo=data.data;
_this.total=data.total;
_this.msg="暂无数据!"
}else{
_this.msg=data.msg?data.msg:'查询失败!';
}
_this.loading=false;
}));
}
},
watch: {
'$route' (to) { //监听路由是否变化
this.cancelReq();
this.cancelList=[];
this.urlType=to.name=='alarm'?'3':to.name=='discern'?'2':'1'
this.selectReset();
this.getList();
},
},
vue axios 取消上次请求的更多相关文章
- axios取消接口请求
axios取消请求 这里就是分析一下接口请求需要被取消时的一些操作 因为我是用vue写的项目,所以标配用的是axios,怎么在axios中取消已经发送的请求呢? 1.在这之前我们还是先介绍一下原生js ...
- Axios 取消 Ajax 请求
Axios 取消 Ajax 请求 Axios XMLHttpRequest https://caniuse.com/?search=XMLHttpRequest https://developer.m ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- vue --- axios发post请求后台接收不到参数的三种解决方案
最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...
- vue+axios 对restful 请求封装
礼拜天来公司整理项目,项目是最近开始重构的,里面的各种http请求接口是restful结构的(为了提升项目的比格),整理一下笔记 [restful介绍][1]博主讲的很详细 技术栈: vue + vu ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- Asp.net MVC Vue Axios无刷新请求数据和响应数据
Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...
- 请求超时VUE axios重新再次请求
//在main.js设置全局的请求次数,请求的间隙 axios.defaults.retry = 4; axios.defaults.retryDelay = 1000; axios.intercep ...
- vue axios 发送post请求,后端接收参数为null
1首先检查自己的传参方式是否正确,我是传一个对象,没有问题,接口也触发了 2查了下资料说是 Content-Type的问题,设置为 'application/x-www-form-urlencod ...
随机推荐
- pip安装问题
一,安装pyecharts 出现问题的2个提示 failed to import pyecharts_snapshot 成功解决 第一个升级问题 you are using pip version ...
- Spring-----AOP-----事务
xml文件中: 手动处理事务: 设置数据源 <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooled ...
- 关于C#mvc用iis发布,虚拟目录的问题。
mvc关于iis发布虚拟目录的问题,解决方法是修改代码中路径的方式,例如ajax中常用的为url:“/Home/Index”,可修改为 url: '@Url.Action("Index&qu ...
- javaScript之数组操作方法(一)
本篇文章主要总结了几个简单的数组操作方法.数组就是一组数据的集合,接下来我们就了解一下几种数组的操作方法. 1. join方法:把数组的所有元素放入一个字符串.举例如下: var arrJoin=[& ...
- 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别
一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...
- lunx中部分命令总结
一.文件和目录操作命令ls 全拼list,功能是列出目录的内容及其内容属性信息. cd 全拼change directory,功能是从当前工作目录切换到指定的工作目录. cp 全拼copy,其功 ...
- 递归实现列出当前工程下所有.Java文件
package com.lanxi.demo2_3; import java.io.File; import java.util.ArrayList; import java.util.List; / ...
- easyui datagrid 后台返回所有数据,前台分页
function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'fu ...
- vim学习纪要
普通模式 根据屏幕行上下移动. gj gk g0 g^ g$ 移动到行首第一个非空字符 ^ 反向移动到上一单词的词尾 ge 插入模式 粘贴寄存器中内容 <C-r> 可视模式 移动光标的起始 ...
- flask记录
flask文件上传 flask 文件上传 https://www.cnblogs.com/wongbingming/p/6802660.html flask多文件上传:https://blog.cs ...