javascript - Angular 2：从服务返回数据时未定义

Question

我正在使用服务进行 http 调用，然后将响应返回给组件，当我控制台它时，我得到“未定义”。我已设置超时以确保 http 请求在控制台打印之前完成，但没有任何运气。我是 Angular 2 的新手，如果有人能帮助我，我将不胜感激。我的服务代码：

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { LoginComponent } from './login/login.component';

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

      rootUrl = 'https://dev-510009.oktapreview.com/'
      constructor(public _http: HttpClient){

      }
      primaryVerify1(userData) {
        let data = {
          "username": userData.username,
          "password": userData.pass,
          "options": {
            "multiOptionalFactorEnroll": true,
            "warnBeforePasswordExpired": true
          } 
        };
       this._http.post(this.rootUrl + "api/v1/authn", data, {
         headers: {
           'Content-type': 'application/json'
         }
       }).subscribe(response => {
         if(response.status == 'SUCCESS'){
          let primaryverifydata = response
           console.log("primaryverifydata", primaryverifydata)
           let data1 = {
              "factorType": "token:software:totp",
              "provider": "GOOGLE"
           }
           this._http.post(this.rootUrl + "api/v1/users/"+ primaryverifydata._embedded.user.id + "/factors", data1,
           {
             headers: {
               'Content-type': "application/json",
               'Authorization' :'SSWS 00e1Wq_tDwvikJt2ZufC0DgW58JX61R6BEQriGsvtl',
               'Accept': "application/json"
             }
           }).subscribe(response => {
             console.log(response)
             let enrollResponse = response;
             if(response.status = 'PENDING_ACTIVATION'){
               window.open(enrollResponse._embedded.activation._links.qrcode.href, '_blank')
               return response;
             }

           })
         }
       })
      }


}

我的组件代码：

    import { Component, OnInit } from '@angular/core';

    import { LoginService } from '../login-service.service';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css'],
         providers: [LoginService],
    })
    export class LoginComponent implements OnInit {
         userData: object;
      pass: any;
        enrollResponse: object;
    constructor(private loginservice: LoginService) {
        this.userData = {};
        this.pass = "";
        this.enrollResponse = {}
       }
        ngOnInit(){
          /*  this.enrollResponse = this.loginservice.primaryVerify;
            console.log(" this.enrollResponse",  this.enrollResponse)*/
        }
        primaryVerify(){
            let some = this.loginservice.primaryVerify1(this.userData);
            setTimeout(() => {
                 console.log("this.enrollResponse", some)
            },5000)

        }
    }
Kindly note: primaryVerify() gets fired when user clicks on submit button.

标签： javascriptangulartypescriptangular2-services

Answer 1

primaryVerify1 不返回任何内容，因此undefined是预期的。

你应该做的是使用回调或承诺。类似于以下内容：

primaryVerify1(userData, callback) {
  ...
         let enrollResponse = response;
         if(response.status = 'PENDING_ACTIVATION'){
           window.open(enrollResponse._embedded.activation._links.qrcode.href, '_blank')
           callback(response);
         }

并像这样使用它：

let some = this.loginservice.primaryVerify1(this.userData, function(res) {
  console.log("this.enrollResponse", res);
});

当然，这并不能很好地处理错误（您可能希望在每个可能出现错误的情况下尽早返回），但它为您提供了一个起点。