angular error handling not working using angular 12

Question

I tried angular error manager, I created a posts.component.ts component, I created a posts.service.ts service, I retrieved the posts by api: https://jsonplaceholder.typicode.com/posts, 100 posts, now generate an error, by deleting a non-existent post post n123. when I click on button delete, it does not manage any error either alert or console.

post.component.html

<ul class="list-group">
    <li class="list-group-item" *ngFor="let post of posts">
        <h4>{{ post.title }}</h4>
        <p>{{ post.body }}</p>
        <div align="right">
            <button class="btn btn-warning" (click)="editPost(post)">Edit</button>
            <button class="btn btn-danger" (click)="deletePost(post)">Delete</button> 
       </div>
    </li>
</ul>

post.service.ts

deletePost(post:any){
     return this.http.delete(this.url + "/" + post.id)
   }

post.component.ts

deletePost(post:any){
    this.postService.deletePost(post)
    .subscribe((response:any)=>{
          let index = this.posts.indexOf(post);
          index=123;
          this.posts.splice(index,1);
        },(error:Response) => {
          if(error.status === 404){
            alert("ce post deja supprimer")
          }else{
            alert("error server");
            console.log(error);
          }
        })
  };

@Raffael thx for answer, response is list of post see picture i edit my code — eee aaa
– eee aaa, Commented Jan 28, 2022 at 17:19

Raffael · Accepted Answer · 2022-01-28 17:28:00Z

1

This has nothing to do with your code. The API responds with a HTTP Status Code of 200, even when trying to delete a non existent post. This basically means, that even though nothing can be deleted because it doesn't exist https://jsonplaceholder.typicode.com/ responds that the operation went smoothly.

You can test this using a client of your choice, such as postman. I have saved the request here: https://documenter.getpostman.com/view/11980158/UVeCPTWx You can execute it by clicking on the top right "Run in Postman" and see that it returns with 200.

answered Jan 28, 2022 at 17:28

Raffael

2532 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Imran · Accepted Answer · 2022-01-28 18:51:38Z

0

this.Service.functionName(form)
.subscribe((response:any)=>{
      let index = this.posts.indexOf(post);
      index=123;
      this.posts.splice(index,1);
    },(error:Response) => {
      if(error.status === 404){
        alert("opps! Got error")
      }else{
        alert("error server");
        console.log(error);
      }
    })

answered Jan 28, 2022 at 18:51

Imran

11 bronze badge

Collectives™ on Stack Overflow

angular error handling not working using angular 12

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related