Angular 5中如何在POST请求响应后从REST API获取返回数据？

Hey there! Let's figure out why you're struggling to fetch and display the message from your server's JSON response. Based on the Angular service code snippet you shared, here are the most common issues to check:

First things first: you need to know exactly what the server is sending back. If you’re trying to access response.message directly, but the actual JSON looks like {"data": {"message": "Success!"}}, you’ll be reaching for a property that doesn’t exist at the top level.

Quick way to confirm this? Log the full response to your browser console:

this.yourService.yourRequestMethod().subscribe(
  response => console.log('Full server response:', response),
  error => console.error('Request error:', error)
);

Take a look at that console output—this will tell you exactly where your message is nested.

You’re using RxJS’s map to transform the HTTP response, but if you’re not navigating the response structure correctly here, you might be discarding the message entirely. For example:

• If your server returns a top-level message like {"message": "Hello!"}, keep your map simple:

  return this.http.get('/your-api-endpoint').map(response => response);
  

• If the message is nested (e.g., {"apiResponse": {"message": "Hello!"}}), adjust the map to extract the right property:

  return this.http.get('/your-api-endpoint').map(response => response['apiResponse'].message);
  

Even if your service is handling the response correctly, your component might not be accessing the message properly. For example, if your service returns the full JSON object, your component should reference the correct property when subscribing:

this.userService.yourMethod().subscribe(
  data => {
    this.displayedMessage = data.message; // Match the actual JSON structure here
    console.log('Fetched message:', this.displayedMessage);
  },
  error => {
    // Don’t forget error messages! Servers often send errors in the error object
    this.errorMessage = error.error.message;
  }
);

Angular’s HttpClient automatically parses JSON responses by default, but if the server sends a non-JSON Content-Type header (or malformed JSON), this can break things. Check the server’s response headers to ensure it’s sending application/json. If not, explicitly set the response type in your request:

return this.http.get('/your-api-endpoint', { responseType: 'json' });

If the server returns an error status code (4xx/5xx), your success callback won’t trigger—you need to handle these in the error block. Many servers include error messages in the error property of the HttpErrorResponse, so make sure you’re checking that:

.subscribe(
  success => {},
  error => {
    console.log('Error message from server:', error.error.message);
    this.errorDisplay = error.error.message;
  }
);

If you can share the exact JSON response from your server and the full subscription code in your component, we can narrow this down even further!

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