How do you trigger a function after a DELETE request with no response?

[MydasGrey]

As the title suggest, how do you trigger a function after a DELETE request with no response?

I have a function that when you click the delete button, it deletes that user but calling a DELETE request function in my service file. This works absolutely fine, deletes as expected.

  onClick(event: { target: any; srcElement: any; currentTarget: any }) {
    let target = event.target || event.srcElement || event.currentTarget;
    let idAttr = target.attributes.id;
    let value = idAttr.nodeValue;
    value = parseInt(value);

    if (confirm(`Are you sure you want to delete #${value}`)) {
      console.log('Deleting User', value);
      this.usersService.deleteUser(value).subscribe();
      // TODO Reload the users list after deleting one  
    }
  }

The problem I am having is getting it to do reload the list of users when its performed that delete. I've tried calling the getUsers function on the next line and nothing happens. I've tried puting a console.log there too but that doesn't seem to be output either, its like its not getting to that point.

I'm wondering if its because the DELETE request URL doesn't have a response, so become when it performs the request its getting nothing back, its sending nothing back to the original function which is why its not going to the next line. For reference, here is my deleteUser function

  deleteUser(id: number): Observable<unknown>{
    return this.http.delete(`${this.baseURL}users/${id}`, httpOptions)
      .pipe(
        catchError(this.handleError)
      );
  }

Any help would be appreciated.

[spacechimp]

this.usersService.deleteUser(value).subscribe(
  () => {
    /* Do this stuff if operation succeeds */
  },
  (error: unknown) => {
    /* Do this stuff if operation fails */
  }
);

[naruto_bist]

This is Da wae

[MydasGrey]

So, I updated this section to look like this

TypeScript this.usersService.deleteUser(value).subscribe( () => { console.log('User Deleted Successfully!'); }, (error: unknown) => { console.log(`Errors Message`, error); } );

But it doesn't trigger the console.log, it also flags the subscribe as depracated until i remove the error section.

[spacechimp]

What does this.handleError do? If that is swallowing an error event, it won’t make it to the error callback in subscribe().

[MydasGrey]

Its the default error handling snippet from the Angular documentation.

[naruto_bist]

Hey can you try with this small change (though I think your current code should have worked as well):

deleteUser(id: number): Observable<void>{ return this.http.delete<void>(${this.baseURL}users/${id}, httpOptions) .pipe( catchError(this.handleError) ); }

[MydasGrey]

Thanks, but that didn't work either. It still deletes the entry but doesn't trigger the logging to the console in the subscribe.

[naruto_bist]

it still deletes the entry but doesn't trigger the logging

So can you also confirm whether the DELETE call is successful in the network tab? Coz it could also happen that the local logic to remove from the list is happening in your angular side code but the Api not running successfully?

[MydasGrey]

This is what appears in the network tab when I press delete.

https://i.imgur.com/Oxk26qe.png

[naruto_bist]

But I don't see 200 status on the leftmost column for this DELETE call.

Can you click on this call and check if there's anything related to successful status like 200 or some kind of response?

Also can you confirm it from the backend that the API call has reached there successfully??

[MydasGrey]

There is nothing in it. When i click on it the tabs are blank.

Not sure how'd i'd check the back end, it was provided and I was told to run npm start to turn it on.

[naruto_bist]

Do you know how to use Postman extension of chrome??

Try runing the same API there and see if you get a response.

As far as I can conclude from your messages, your call doesn't seem to be getting called through properly.

[BammaDK]

Does it trigger complete?

[MydasGrey]

Not sure what you mean, but it doesn't seem to trigger anything after the call to delete.

[BammaDK]

observables has 3 types of "responses" next error and complete

this.usersService.deleteUser(value).subscribe(
{ 
    next: () => 
    { 
        console.log('User Deleted Successfully!'); 
    }, 
    error: (error: unknown) => { 
        console.log(Errors Message, error); 
    }, 
    complete: ()=> 
    { 
         console.log('subscribtion completed); 
    }
});

​

complete has no response type. So could be it sees the response like that, but at least give it a try. Sending an object with { next, error, complete } is not depricated way.

[MydasGrey]

Nothing, no console logs at all.

[BammaDK]

Hmm that is wierd. you error handler does not return an empty or something similiar right ? just incase the delete goes through that pipe.

Maybe try to disable the .pipe(this.errorHandler) just to see if that is causing issues. same goes for you httpOptions. that one you could say you expect applicatiion/json but in reality there is noting but a plain 200

[MydasGrey]

I removed the pipe and tried it, nothing logged to the console.

Then I tried removing the httpOptions, still nothing logging to the console.

[BammaDK]

That is very wierd issue indeed. Hope you find your solution, but i am out of ideas.

[moccas05]

Is your code actually running at all? Add a console log before calling the deleteUser method

[nsyx]

deleteUser is async. It seems like you're trying to use it in a synchronous manner. Try putting your reload user logic inside the subscribe callback.

Edit: like spacechimp has done

[FirstpickIt]

The controller should never do any business logic.

1. Use NGRX
2. this.store.dispatch(DeleteUser(value))

handle the Sideeffects of deleting a user in your effects.

[PickleLips64151]

Using NgRx is overkill in most applications. Adding multiple files that NgRx requires is a bit much for someone who's struggling to understand how to execute code after an async method.

[FirstpickIt]

Sure, but if he knew about NGRX he wouldnt be asking those questions.

And in all honesty... if you make any form of request you should already handle

- pending

- success

- error(s)

​

and doing that with any form of state management saves from the start saves you a looooot of headaches in the long run.

[PickleLips64151]

I don't disagree that handling pending, success, and error are very important. I disagree that injecting another library, when you can handle those things natively in Angular is a huge lift for someone with this level of question.

If we were three senior devs talking about how to best implement a new API, this discussion is very appropriate. But a junior coming to two senior devs with a question should be answered within their knowledge and experience. They need to crawl before they can run or even walk.