axios取消请求操作（适用于上传文件）

最新推荐文章于 2024-08-13 10:59:25 发布

爱吃鱼的康康

最新推荐文章于 2024-08-13 10:59:25 发布

阅读量1.3k

点赞数

分类专栏： vue 笔记文章标签： vue.js 前端 javascript

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

版权

笔记同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

vue

27 篇文章 0 订阅

订阅专栏

本文介绍了如何使用axios的CancelToken取消请求，包括创建令牌、获取源对象、发送请求并设置取消操作，重点展示了在文件上传场景中的应用，以及在Element UI的el-upload组件中的自定义实现。

摘要由CSDN通过智能技术生成

	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