Nutritionix API调用无响应排查：卡路里计算器接口请求异常

Let's walk through the issues with your current code and get that API call working properly:

1. You're not subscribing to the Observable #

Angular's HttpClient.post() returns an Observable, which is lazy—it won't execute the request until you call .subscribe() on it. Right now, you're just calling this.authService.fetchFood() in your component without subscribing, so the request never actually gets sent to the Nutritionix API.

Fix the component call: #

// In register.component.ts
this.authService.fetchFood().subscribe({
  next: (response) => console.log('API Response:', response),
  error: (error) => console.error('API Call Failed:', error)
});

2. Your map operator is swallowing the response #

In your Service.ts, the map operator only logs the response but doesn't return it. This means even if you subscribe later, you won't receive the data. Use tap() instead if you just want to log without modifying the stream:

Update the service code: #

fetchFood(){
  const url = 'https://trackapi.nutritionix.com/v2/natural/nutrients';
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'x-app-id': 'aea728dc',
    'x-app-key': 'b945aeaf7ce6a860870f8686248a9485',
  });
  const query="banana"
  const options = { headers: headers };

  return this.http.post<any>(url, {query}, options).pipe(
    tap((res) => console.log('Raw API Response:', res)) // Log without altering data
  );
}

3. Verify API Authentication & Request Format #

Double-check these details to rule out other issues:

• Ensure your x-app-id and x-app-key are valid (you can confirm this in your Nutritionix dashboard).
• The request body {query: "banana"} matches the API's required format (this part looks correct for the /natural/nutrients endpoint).
• Use your browser's Network DevTools to inspect the request:
  • Check if the request is being sent at all.
  • Look for status codes like 401 Unauthorized (invalid credentials) or 400 Bad Request (malformed data).

4. Add Error Handling #

Always handle errors to debug issues quickly. You can extend the service with error handling using catchError:

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

// Inside fetchFood()
return this.http.post<any>(url, {query}, options).pipe(
  tap((res) => console.log('Raw API Response:', res)),
  catchError((error) => {
    console.error('API Error Details:', error);
    return throwError(() => new Error('Failed to fetch food data'));
  })
);

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