Description
Describe the bug
When using useAxios from the VueUse library to make multiple HTTP requests, a common issue occurs when the execute method is called repeatedly in quick succession. The useAxios hook prioritizes the last request, but instead of returning a success response, it returns a cancel error for the last executed request.
This is problematic when you expect the final request to complete successfully, but it incorrectly throws an error due to cancellation, even though the request was actually executed and processed correctly.
![Screenshot 2024-11-23 at 03 21 00](https://private-user-images.githubusercontent.com/57658187/389092338-de5c2179-0bb0-431c-a058-986a1193bd17.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4NDE4MzEsIm5iZiI6MTczOTg0MTUzMSwicGF0aCI6Ii81NzY1ODE4Ny8zODkwOTIzMzgtZGU1YzIxNzktMGJiMC00MzFjLWEwNTgtOTg2YTExOTNiZDE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDAxMTg1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY4Yzk2N2ZjODcyNzEyNDVmNmQ0YzlkZWE5MjYxZjkwNjEyMzFkMDJlYWM1MzVjZGQ2MjI3MDI0Y2RhOWJmYjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.DW1YV56RJtrMlKY2tvteTZuiJ2_inmkHNl07wSfJpNY)
![Screenshot 2024-11-23 at 03 21 47](https://private-user-images.githubusercontent.com/57658187/389092358-ce938f10-2fe6-4dea-b77e-0c94e29b791b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4NDE4MzEsIm5iZiI6MTczOTg0MTUzMSwicGF0aCI6Ii81NzY1ODE4Ny8zODkwOTIzNTgtY2U5MzhmMTAtMmZlNi00ZGVhLWI3N2UtMGM5NGUyOWI3OTFiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE4VDAxMTg1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYyMDBlMWEzZDRhZTJjOGMzYzJiMWQ5NGEzY2EyNGRjN2JjODVhODNlMWQ2MmE3NTA2ODI4M2U5N2ZjZDFmMGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.zlq8f90suNFZkPek4H-MvxMjjPI1nlsQlPzAFYOAGHU)
Expected Behavior:
The expectation is that useAxios should not throw a cancellation error for the final request if it has been executed successfully. Instead, it should return the actual result of the request.
Reproduction
https://codesandbox.io/p/sandbox/t5287m?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue
System Info
System:
OS: macOS 15.1
CPU: (8) arm64 Apple M3
Memory: 100.56 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v20.15.1/bin/yarn
npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
Browsers:
Chrome: 131.0.6778.86
Safari: 18.1
npmPackages:
@vueuse/core: ^10.11.1 => 10.11.1
@vueuse/integrations: ^10.11.1 => 10.11.1
vue: ^3.4.37 => 3.4.38
Used Package Manager
yarn
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.