машинопись функция возвращает неопределенные при вызове функции в другом классе

Question

В моей углового проекта 2 У меня есть этот класс:

export class ApiEnvConf { 

    /** 
    * @type {Object} 
    */ 
    public _dev: {environnement: string, basePath: URL}; 

    /** 
    * @type {Object} 
    */ 
    public _staging: {environnement: string, basePath: URL}; 

    /** 
    * @type {Object} 
    */ 
    public _prod: {environnement: string, basePath: URL}; 

    constructor(){ 
     this._dev; 
     this._staging; 
     this._prod; 
    } 

    /** 
    * @return {Object} 
    */ 
    get devEnv(): {"environnement": string, "basePath": URL} { 
     return this._dev; 
    } 

    /** 
    * @return {Object} 
    */ 
    get stagingEnv(): {"environnement": string, "basePath": URL} { 
     return this._staging; 
    } 

    /** 
    * @return {Object} 
    */ 
    get prodEnv(): {"environnement": string, "basePath": URL} { 
     return this._prod; 
    } 

    /** 
    * @param {string} environnement 
    * @param {URL} basePath 
    * @return {Object} 
    */ 
    set devEnv(newDevEnvArray: {environnement: string, basePath: URL}){ 
     this._dev = newDevEnvArray; 
    } 

    /** 
    * @param {string} environnement 
    * @param {URL} basePath 
    * @return {Object} 
    */ 
    set stagingEnv(newStagingEnvArray: {environnement: string, basePath: URL}) { 
     this._staging = newStagingEnvArray; 
    } 

    /** 
    * @param {string} environnement 
    * @param {URL} basePath 
    * @return {Object} 
    */ 
    set prodEnv(newProdEnvArray: {environnement: string, basePath: URL}) { 
     this._prod = newProdEnvArray; 
    } 
} 

Как вы можете видеть, что я экспортировать этот класс, чтобы использовать его в других файлах (другие классы). Вот один пример файла с помощью этого класса:

import { Injectable, Component } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { ApiEnvConf } from './api-env-conf-class'; 

@Injectable() 
@Component({ 
    providers: [ ApiEnvConf ] 
}) 
export class ImportConfig { 

    /** 
    * @type {ApiEnvConf} 
    */ 
    public envParam = new ApiEnvConf(); 

    constructor(
    public http: Http 
) {} 

    loadEnvData() { 
    this.http.get('assets/env-config/parameters.json') 
    .map((res: Response) => (res.json())) 
    .subscribe(
     data => { 
     this.envParam = this.instanciateApiEnvConfClass(data); 
     return this.envParam; 
     }, 
     err => { 
      console.log("oops !"); 
      return err; 
     } 
    ) 
    } 

    instanciateApiEnvConfClass(data: Object){ 
    let apiEnvConf = new ApiEnvConf(); 
    // set dev by calling getter of ApiEnvConf class 
    apiEnvConf.devEnv = { 
     environnement: data["dev"]["environnement"], 
     basePath: new URL(data["dev"]["basePath"]) 
    }; 
    // set stagging by calling getter of ApiEnvConf class 
    apiEnvConf.stagingEnv = { 
     environnement: data["staging"]["environnement"], 
     basePath: new URL(data["staging"]["basePath"]) 
    }; 
    // set prod by calling getter of ApiEnvConf class 
    apiEnvConf.prodEnv = { 
     environnement: data["prod"]["environnement"], 
     basePath: new URL(data["prod"]["basePath"]) 
    }; 
    return apiEnvConf; 
    } 
} 

Так что если вы посмотрите в функцию loadEnvData(), если я делаю console.log(this.envParam); перед returnзаявление У меня есть этот результат в моей консоли браузера:

Так что мой класс ApiEnvConf не пуст и обладает всеми необходимыми свойствами.

Класс ImportConfig - это еще один класс, который я использую во многих файлах для инициализации конфигурации среды.

Таким образом, в другом классе другой папке у меня есть этот класс:

import { Injectable, Component } from '@angular/core'; 
import { ImportConfig } from '../services/import-config'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
@Component({ 
    providers: [ ImportConfig ] 
}) 
export class Test { 
constructor(public http: Http, public config: ImportConfig) { 
    this.config; 
    this.check(); 
    } 

    check() { 
    let test = this.config.loadEnvData(); 
    console.log(test); 
    } 

    /* 
    ... 
    ... 
    ... 
    */ 
} 

Выход console.log(test); возвращает меня «не определено». Где я ошибаюсь?

Answer 1

Вы назвали асинхронную функцию, которая не возвращает ничего:

loadEnvData(env: string = "dev") { 
    this.http.get('assets/env-config/parameters.json') 
    .map((res: Response) => (res.json())) 
    .subscribe(
     data => { 
     this.envParam = this.instanciateApiEnvConfClass(data); 
     return this.envParam; 
     }, 
     err => { 
      console.log("oops !"); 
      return err; 
     } 
    ) 
    // Note: *here* is where you would, in theory, return something 
    } 

При вызове функции без явного return, он возвращает undefined. Вы предположили, что эта функция синхронна, а это не так.

Функция loadEnvData должна обеспечивать некоторый механизм обратного вызова для указания завершения; там вы можете получить доступ к загруженным данным.