为啥 Angular 6 不发送 HTTP Get/Post 请求？

Posted 2023-03-31

【中文标题】为啥 Angular 6 不发送 HTTP Get/Post 请求？

【英文标题】：Why Angular 6 doesn't send HTTP Get/Post requests?为什么 Angular 6 不发送 HTTP Get/Post 请求？

【发布时间】：2018-08-05 07:45:07

【问题描述】：

我在 Angular 6 中有以下服务：

@Injectable()
export class LoginService 
    constructor(private http: HttpClient)  

    login(): Observable<boolean> 
        var url = `$environment.baseAPIUrl$environment.loginUrl`;

        return this.http.get<boolean>(url);
    

我从我的组件中调用它：

@Component(
    selector: 'bpms-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
)
export class LoginComponent implements OnInit 

    constructor(private loginService: LoginService)  

    ngOnInit() 
    

    login() 
        var self = this;
        self.loginService.login();
    

为什么它不发送我的请求？

【问题讨论】：

你必须订阅Observable .. 它应该是self.loginService.login().subscribe()

【参考方案1】：

Observable 在您订阅之前不会被调用。 Http API 方法返回 Observable，仅仅通过调用 observable 不会进行 API 调用。

self.loginService.login().subscribe(
  (data) => console.log('Logged in successfully')
);

【参考方案2】：

在订阅返回的 observable 之前不会进行 Http 调用。

@Component(
selector: 'bpms-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
)
export class LoginComponent implements OnInit 

constructor(private loginService: LoginService)  

ngOnInit() 


login() 
    var self = this;
    self.loginService.login().subscribe();
 

【参考方案3】：

您应该调用您的login() 函数，例如在ngOnInit() 或表单提交事件中，请务必调用它。

并更新您的 login() 函数，如下所示：

login() 
    this.loginService.login()
        .subscribe((res) => console.log('login() response!'));
 

【参考方案4】：

如果你的返回类型是 Observable 你需要订阅它，以便在它准备好后得到响应。所以你的代码会是这样的

@Component(
selector: 'bpms-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
)
export class LoginComponent implements OnInit 

constructor(private loginService: LoginService)  

ngOnInit() 


login() 
    var self = this;
    self.loginService.login().subscribe();