本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(402)

2021-04(167)

2021-05(165)

2021-06(97)

2021-07(5)

axios取消请求操作(适用于上传文件)

发布于2022-01-06 23:13     阅读(192)     评论(0)     点赞(26)     收藏(2)


	axios取消请求操作
	1. 创建取消令牌的生成器对象
	 	const CancelToken = axios.CancelToken;
    2.从中获取令牌对象
      	const source = CancelToken.source();
    3.发送请求的时候
    	axios({
    	 url:'https:baidu.com',
    	 method:'post',
    	 cancelToken:source.token
		})
		setTimeout(()=>{
			source.cancel('取消请求')
		},2000)
	4.使用场景,一般适用于上传文件等(上传文件的时候发现文件错误(文件比较大),需要中途取消)
	4.1 框架element中el-upload
	自定义请求覆盖之前框架中自带的请求方式 :http-request="uploadFile"
	 uploadFile(params){
      let file = params.file
      let formData = new FormData();
	  formData.append('file', params.file)
      axios({
        url:'/api/file/main/preUpload',
        data:formData ,
        method: "post",
        cancelToken: source.token,
        onUploadProgress: event => { //axios中自带获取文件上传进度条回调
			file.percent = parseInt(event.loaded/event.total*100) //获取文件上传进度条的值
			params.onProgress(file) 
		}
      }).then(res=>{
        params.onSuccess(res.data)
      })
    },
也可以参考这个博主的
https://blog.csdn.net/qq_56018649/article/details/120179089?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-1.queryctr&spm=1001.2101.3001.4242.2&utm_relevant_index=3		

原文链接:https://blog.csdn.net/qq_43341001/article/details/122298412




所属网站分类: 技术文章 > 博客

作者:前端霸主

链接:http://www.qianduanheidong.com/blog/article/284450/2156f4ff50b5713a460d/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

26 0
收藏该文
已收藏

评论内容:(最多支持255个字符)