axios取消接口操作

最新推荐文章于 2024-07-07 10:10:45 发布

前端老实人灬

最新推荐文章于 2024-07-07 10:10:45 发布

阅读量359

点赞数

分类专栏： vue 文章标签： axios 文件上传请求拦截器取消请求 sessionStorage

本文链接：https://blog.csdn.net/weixin_45264424/article/details/123419352

版权

vue 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

// 发送axios接口
 let fileList = this.restfileList
 fileList.forEach((item, index) => {
      setTimeout(() => {
          let notifyKey = 'q' + nanoid() //生成唯一的id
          window.sessionStorage.setItem("cancelAxiosId", notifyKey)// 存浏览器session里面，请求拦截器用
          this.notifyInit[notifyKey] = this.$notify({
              iconClass: "el-icon-loading",
              title: '提示',
              duration: 0,
              offset: 65,
              dangerouslyUseHTMLString: true,
              message: item.name + '文件上传中...',
              onClose: () => {// 取消操作，取消axios接口请求
                  let cancelArr = window.axiosCancel;
                  cancelArr = cancelArr || [];
                  cancelArr.forEach((ele, index) => {
                      if (ele.id == notifyKey) {
                          this.$message({
                              message: '取消上传！',
                              type: 'warning'
                          });
                          ele.cancel("取消请求")  // 在失败函数中返回这里自定义的错误信息
                          delete window.axiosCancel[index]
                      }
                  })
              }
          });
          let formData = new FormData()
          formData.append("id", id);
          formData.append('file', item.raw)
          this.$api.systemApi.uploadFile(formData).then((res) => {
              if (res.success) {
              		// 接口成功以后，删除axiosCancel
                  let cancelArr = window.axiosCancel;
                  cancelArr = cancelArr || [];
                  cancelArr.forEach((ele, index) => {
                      if (ele.id == notifyKey) {
                          delete window.axiosCancel[index]
                      }
                  })
                  this.$notify({
                      title: '成功',
                      message: '文件上传成功！',
                      type: 'success'
                  });
                      this.notifyInit[notifyKey].close()
              } else {
              	  //  接口失败删除 window.axiosCancel
                  let cancelArr = window.axiosCancel;
                  cancelArr = cancelArr || [];
                  cancelArr.forEach((ele, index) => {
                      if (ele.id == notifyKey) {
                          delete window.axiosCancel[index]
                      }
                  })
                  this.$notify.error({
                      title: '错误',
                      message: item.name + "文件上传失败！"
                  });
                  setTimeout(() => {
                      this.notifyInit[notifyKey].close()
                  }, 100)
              }
          });
      }, 500)
  })

// axios 请求拦截器
window.axiosCancel = []  // 全局定义一个存放取消请求的标识
// 请求拦截
axios.interceptors.request.use(config => {
	// 在发送请求之前做些什么 验证token之类的
	let isLogin = config.url.substring(config.url.length - 5, config.url.length);
	if (isLogin != 'login'&& config.url.indexOf("https://geo.datav.aliyun.com/") == -1) {
		let token = store.state.user.token;
		if(token) {
			config.headers['x-auth-token'] = `${token}`;
		}
	}
	if(config.url.indexOf("/minio/upload")!=-1||config.url.indexOf("/api/minio/move")!=-1){
		let cancelAxiosId = window.sessionStorage.getItem("cancelAxiosId")
		config.cancelToken = new axios.CancelToken(cancel => {
			window.axiosCancel.push({
				id:cancelAxiosId,
				cancel:cancel
			})
		})
	}
	NProgress.start();
	return config;
}, error => {
	// 对请求错误做些什么
	return Promise.reject(error);
})