After cancelling an action to send a delete request to the server, the app crashes - axios

Question

I'm using axios to make HTTP request
This is my function to delete a user in my database, I'm using json-server which is installed as a dependency
const deleteThisPerson = (id) => {
// console.log(`${name} is being deleted`);
contactServices
.remove(id)
.then(() => {
const currentContacts = persons.filter(person => person.id !== id)
setPersons(currentContacts)
})
.catch(error => console.log(error))
}
and my http delete request is this
const remove = (id) => {
if (window.confirm(`Delete user?`)) {
const request = axios.delete(`${baseUrl}/${id}`)
return request.then(response => response.data)
} else {
return false
}
}
I have a window.confirm() that pops up when a user tries to delete a resource from the database, it works if I click on Ok but crashes if I click on Cancel, I get the following error message **Uncaught TypeError: _services_persons__WEBPACK_IMPORTED_MODULE_2__.default.remove(...).then is not a function**
How can I correct this?

Answer 1

In the else branch, you are returning false which does not have a then property (false.then is undefined). You can use Promise.reject to return a rejected promise instead.
const remove = (id) => {
if (window.confirm('Delete user?')) {
// ...
} else {
return Promise.reject(new Error('Request cancelled'))
}
}
You can also omit the else clause since you're returning from the if branch.
const remove = (id) => {
if (window.confirm('Delete user?')) {
// ...
}
return Promise.reject(new Error('Request cancelled'))
}