vue中axios取消、上传以及下载进度

原创已于 2022-05-07 10:27:39 修改 · 2.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

于 2021-04-22 14:54:17 首次发布

循序渐进，Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在axios中实现请求的取消操作，包括使用CancelToken和源操作，并详细讲解了如何监听上传和下载进度。适合进一步掌握axios的高级用法。

记录工作中积累的知识点，有不足，请指出，非常感谢支持，一起加油学习！！！
git文档地址传送门

1. axios使用场景之`取消某个请求`

方法一:
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// 在需要中断请求的地方直接调用 cancel 方法；
cancel();

方法二:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 在需要中断请求的地方直接调用 cancel 方法，文字描述是可选参数；
source.cancel('Operation canceled by the user.');

2. axios使用场景之`监听上传和下载进度`

axios.post('/user/12345',
  {
    name: 'new name'
  }, 
  onUploadProgress: function (progress) {
  	// 在这里可以添加你的上传逻辑，比如：增加进度条等等
    console.log(Math.round(progress.loaded / progress.total * 100) + '%');
  },
  onDownloadProgress: function (progress) {
    // 在这里可以添加你的下载逻辑，比如：增加下载进度条等等
    console.log(Math.round(progress.loaded / progress.total * 100) + '%');
  }
)