axios取消请求以及获取文件上传进度

1. axios取消接口请求

  1. 通过axios.CancelToken.source生成取消令牌token和取消方法cancel

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    
    axios.post('/user/12345', params, {
      cancelToken: source.token
    });
    
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');
    
  2. 通过axios.CancelToken构造函数生成取消函数(推荐)

    const CancelToken = axios.CancelToken;
    let cancel;
    
    axios.post('/user/12345', params, {
      cancelToken: new CancelToken(function executor(c) {
        cancel = c;
      })
    });
    
    cancel();
    

2. 获取文件上传进度

const that = this;
axios.post('upload', params, {
  onUploadProgress: (progressEvent) => {
    /* 
      progressEvent.loaded 已上传文件大小
      progressEvent.total 被上传文件的总大小
    */
    const progressPrecent = (progressEvent.loaded / progressEvent.total * 100);
    // 如果 token 失效,则取消该请求
    if (!sessionStorage.getItem('token')) {
      this.caccel();
    }
  },
  cancelToken: new CancelToken(function executor(c) {
    that.cancel = c;
  })
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容