时间戳

首页 > 解决方案 > isCancel 在 axios 中始终为 false

javascript - isCancel 在 axios 中始终为 false

问题描述

我正在尝试取消一个axios 文件上传的发布请求，但是当我尝试使用axios.isCancel()它时，它总是返回错误，尽管当我cancel token在取消后检查对象时说promise fulfilled这意味着它被取消了，对吗？
这是我的 js 代码：

const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
     const csrftoken = Cookies.get('csrftoken');
     const formData = new FormData();
     const file_selector= document.getElementById('file-selector');
     const cancel =document.getElementById('cancel');
     const success_server= document.getElementById('mession-complated!');
     const progessbar= document.getElementById('progress');
     file_selector.addEventListener('change', () => {
     for (let i = 0; i < file_selector.files.length; i++) {
      formData.append("file", file_selector.files[i]);
     }

     axios.request( {
        method: "post", 
        url: "upload/", 
        data: formData,
        headers: {'X-CSRFToken': csrftoken},
        CancelToken: source.token,
        onUploadProgress: (p) => {
          cancel.style.display= "block" ;
          progessbar.style.display= "block" ;
          progessbar.value= Math.round( (p.loaded * 100) / p.total );
          if(progessbar.value==100){
          cancel.style.display= "none" ;
          progessbar.style.display= "none" ;
          }
           
          //this.setState({
            //fileprogress: p.loaded / p.total
          //})
        }

        
      }).then (() => {
       console.log(source.token);

      if (axios.isCancel()) {
        console.log('Request canceled');
    }})
  
       

    






     })

     function cancel_upload(){
      source.cancel('Operation canceled');
     }

标签： javascriptajaxaxios

解决方案

  • 该选项名为cancelTokennotCancelToken
  • axios.isCancel方法需要错误参数 -axios.isCancel(err)

作为替代取消方法，您可以使用cp-axios包装器（现场演示）：

import cpAxios from "cp-axios";

let promise;

function upload() {
  abort();

  const formData = new FormData();

  [...document.querySelector("#files").files].forEach((file) =>
    formData.append("file", file)
  );

  promise = cpAxios
    .request({
      url: "https://httpbin.org/post",
      method: "post",
      data: formData
    })
    .progress((v, scope, data) =>
      console.log(`Progress: ${v} ${JSON.stringify(data)}`)
    )
    .then(
      (v) => console.log(`Done: ${v}`, v),
      (err) => console.warn(`Fail: ${err}`, err)
    );
}

function abort() {
  promise && promise.cancel();
}

推荐阅读