Axios Post Request not firing with cancelToken

[shellac85]

Describe the issue

Hi I am calling two messages. One to create my Axios cancelToken and then one to upload a file. The upload file was working up until I added the cancelToken but I still cannot get the cancelling of the file upload to happen at all. Any ideas?

Example Code

Code snippet to illustrate your question

let source: CancelTokenSource;

Create token:

export async function deleteProgress<T>() {
  source = axios.CancelToken.source();
};

Upload File:

export async function postFiles<T>(
  url: string,
  postForm: FormData,
  queryData: {} = {},
  handleProgress?: (progress: ProgressEvent) => void,
) {
    await axios.post(`${apiRoot}/${url}${objToQuery(queryData)}`, postForm, {
      headers: { 'Content-Type': 'application/json' },
      withCredentials: true,
      onUploadProgress: handleProgress,
      cancelToken: source.token,
    })
    .then(res => console.log(res))
    .catch(thrown => {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      }
    });

  if (true) {
    source.cancel('Request canceled!');
  }
};

Expected behavior, if applicable

A clear and concise description of what you expected to happen.

Environment

• Axios Version [e.g. 0.18.0]
• Adapter [e.g. XHR/HTTP]
• Browser [e.g. Chrome, Safari]
• Browser Version [e.g. 22]
• Node.js Version [e.g. 13.0.1]
• OS: [e.g. iOS 12.1.0, OSX 10.13.4]
• Additional Library Versions [e.g. React 16.7, React Native 0.58.0]

Additional context/Screenshots

Add any other context about the problem here. If applicable, add screenshots to help explain.

[DigitalBrainJS]

Since you're using the await operator, you cancel the request after it completes

[shellac85]

Hi I removed the await but its still not calling.

[DigitalBrainJS]

Everything seems to work fine

          const source = axios.CancelToken.source();

          var formData = new FormData();

          formData.append("username", "Groucho");
          formData.append("accountnum", 123456);
          var content = '<a id="a"><b id="b">hey!</b></a>';
          var blob = new Blob([content], {type: "text/xml"});
          formData.append("webmasterfile", blob);

          axios.post(`https://run.mocky.io/v3/d37e9195-5474-4491-9170-cd323b0d1c39?mocky-delay=5s`, formData, {
              headers: {'Content-Type': 'application/json'},
              withCredentials: true,
              onUploadProgress: console.log,
              cancelToken: source.token,
          })
              .then(res => console.log(res))
              .catch(thrown => {
                  if (axios.isCancel(thrown)) {
                      console.log('Request canceled', thrown.message); // Request canceled Request canceled! 
                  }
              });

          source.cancel('Request canceled!')

codesandbox test

[github-actions]

Hello! 👋

This issue is being automatically marked as stale because it has not been updated in a while. Please confirm that the issue is still present and reproducible. If no updates or new comments are received the issue will be closed in a few days.

Thanks.

[phoenix503]

It is not working for me also.
Unable to cancel the POST request