Angular中Http.delete请求报错TypeError: error.json is not a function排查

Hey there, let's break down why you're hitting this error and how to fix it.

What's Causing This? #

The issue comes from your catch block assuming every error response has a json() method to call—but that's not always the case. Here are the common scenarios triggering this:

• Your backend returns a plain text error message (not JSON-formatted) when that specific if condition is triggered.
• The backend sends an empty response body (like for a 500 internal server error with no content attached).
• You're dealing with a network-level error (e.g., the request never reached the backend), where error is a native Error object instead of an HTTP response.

Solutions to Try #

1. Safely Check for the json() Method First

Modify your error handling to verify if error.json() exists before calling it. This prevents the TypeError when the error isn't a parsable JSON response:

Delete(id: number) { 
  return this.http.delete('apiEndpoint/' + id) 
    .map(res => res.json()) 
    .catch((error: any) => {
      let errorMessage = 'Server error';
      
      // Check if error has a valid json() method
      if (error && typeof error.json === 'function') {
        errorMessage = error.json().error || errorMessage;
      } 
      // Handle native Error objects (network failures)
      else if (error && error.message) {
        errorMessage = error.message;
      }
      // Handle plain text error responses
      else if (typeof error === 'string') {
        errorMessage = error;
      }

      return Observable.throw(errorMessage);
    }); 
};

2. Upgrade to HttpClient (Recommended)

It looks like you're using Angular's older Http module. Angular 4.3+ introduced HttpClient, which auto-parses JSON responses and has more consistent error handling. Here's how to switch:

• First, replace HttpModule with HttpClientModule in your app's root module imports.
• Update your service code to use HttpClient (no more manual res.json() calls):

import { HttpClient } from '@angular/common/http';
import { catchError, throwError } from 'rxjs'; // For RxJS 6+

constructor(private http: HttpClient) {}

Delete(id: number) { 
  return this.http.delete('apiEndpoint/' + id)
    .pipe(
      catchError((error: any) => {
        // HttpClient's error object has structured, easy-to-access data
        const errorMessage = error.error?.message || error.message || 'Server error';
        return throwError(() => new Error(errorMessage));
      })
    ); 
};

Note: If you're on RxJS 5 or earlier, keep using .catch() instead of .pipe(catchError()).

3. Align with Backend Error Format

Reach out to your backend team to confirm what response is sent when that if condition triggers. Ideally, the backend should return a consistent JSON error format every time, like:

{ "error": "Failed to delete: [specific reason]" }

This ensures your frontend can reliably parse the error without unexpected failures.

Final Notes #

The safe check (solution 1) will fix the immediate error, but upgrading to HttpClient (solution 2) will make your code cleaner and less prone to similar issues in the future.

内容的提问来源于stack exchange，提问作者Haraldur