angular - HttpClient 不返回数据

Question

我有以下场景:

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const baseUrl: string = 'https://example.com/api/v1';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  getSingleUser(mail: string) {
    console.log('Getting info from:');
    var url: string = baseUrl + '/users/' + mail;
    console.log(url);
    return this.http.get(url);
  }
}

login.component.ts

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { ApiService } from 'app/api.service';

@Component({
  selector: "login-cmp",
  moduleId: module.id,
  templateUrl: "login.component.html"
})
export class LoginComponent implements OnInit {
  private userProfile: any = [];
  private email: string = 'mail@example.com';

  constructor(private router: Router, 
              private apiService: ApiService) {}

  ngOnInit() { }

  signIn(provider: String): void {    
        console.log('Starting http for ' + this.email);   

        this.apiService.getSingleUser(this.email)
          .subscribe(data => {
            console.log('entered subscribe');
            console.log(data);
          });        
        console.log('Finished getting data.');
      }
    });
  }
}

这是我控制台上的输出:

Starting http for mail@example.com
Getting info from:
https://example.com/api/v1/users/mail@example.com
Finished getting data.

我在日志中看到的是方法 getSingleUser正在调用(消息 2 和 3 由该方法生成)，但 subscribe 中的命令块没有被执行，我不明白为什么。

Answer 1

您的 HTTP 请求很可能返回错误，并且在您的 subscribe 中您没有指定在收到错误响应时要做什么。

尝试改变这个:

this.apiService.getSingleUser(this.email)
    .subscribe(data => {
        console.log('entered subscribe');
        console.log(data);
    });

对此:

this.apiService.getSingleUser(this.email)
    .subscribe(
        data => {
            console.log('entered subscribe');
            console.log(data);
        },
        error => {
            console.log('received an error', error);
        },
    );

根据经验，总是对来自 promises/observables 的错误响应做一些事情，即使只是将它们打印到浏览器的控制台，因为这将帮助您更容易地发现问题。

此外，检查浏览器的“DevTools”(“网络”选项卡)，您会看到 GET 响应正在消失，并以错误结束。