Angular无法获取响应状态文本问题咨询

Hey there! I see you're stuck trying to retrieve the response status text in your Angular GitComponent. Let's break down what's going on and how to fix it.

The Root Cause #

By default, Angular's HttpClient only returns the response body when you make a request. To access metadata like status text, status code, or response headers, you need to explicitly tell HttpClient to return the full HttpResponse object.

Step-by-Step Fix #

First, let's adjust your request code to include the observe: 'response' option. Here's how to modify your existing code:

1. Update your request configuration

Assuming you're making a POST request with your linkBindingModel, modify the call to http.post like this:

ngOnInit(): void {
  // Clean up header initialization (optional but cleaner)
  const authToken = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJzYXNobyIsImF1dGgiOiJST0xFX1VTRVIiLCJleHAiOjE1MjQwODcyMzJ9.MUv5RgI9LxQyrrCfjfX8HR2-XiQmz4vjLqH7V_0Du7VFLC0WrK_y3FfeNoT2Nj_uguIK2ss7jv-LNiHuCGtz4A';
  this.headerForAjax = new HttpHeaders({
    'Authorization': authToken
  });

  const linkBindingModel = { 
    title: 'angular2', 
    linkUrl: 'angularU...' 
  };

  // Add observe: 'response' to get full HttpResponse
  this.http.post<any>(
    '/your-api-endpoint', // Replace with your actual API URL
    linkBindingModel,
    { 
      headers: this.headerForAjax,
      observe: 'response' // Critical line to access status text
    }
  ).subscribe({
    next: (httpResponse: HttpResponse<any>) => {
      // Now you can access status text and other metadata
      console.log('Response Status Text:', httpResponse.statusText);
      console.log('Response Status Code:', httpResponse.status);
      // Access the response body as usual
      console.log('Response Body:', httpResponse.body);
    },
    error: (error: HttpErrorResponse) => {
      // Handle errors and get error status text too
      console.log('Error Status Text:', error.statusText);
      console.log('Error Status Code:', error.status);
    }
  });
}

2. Key Changes Explained

• observe: 'response': This tells HttpClient to return the complete HttpResponse object instead of just the body.
• HttpResponse<any>: The type annotation ensures TypeScript recognizes the full response structure, including statusText and status properties.
• Error Handling: Use HttpErrorResponse in the error callback to access status text even when the request fails (e.g., 404, 500 errors).

Additional Notes #

• If you only need the status code/text and not the full response, you can use observe: 'events' instead, but observe: 'response' is simpler for this use case.
• Double-check that your API server is actually returning a valid status text (most standard HTTP responses do, but custom APIs might omit it).

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