打字稿函數返回undefined

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函數應該提供一些回調機制來指示完成;在那裏你可以訪問加載的數據。