TypeScript - 我无法使用 Angular 2 使用 http get 调用我的 json

Posted 2023-03-13

【中文标题】TypeScript - 我无法使用 Angular 2 使用 http get 调用我的 json

【英文标题】：TypeScript - I can't call my json with http get using Angular 2

【发布时间】：2016-09-01 09:42:08

【问题描述】：

我想开发一个json的文件配置，用http调用get构造函数并将我想要的配置文件的值返回给另一个组件。但是当 return 给我未定义的值时。

我的 Config.json

[ "urlServer": "http://localhost:56877"]

我的配置服务

导出类 configService 网址：字符串；

constructor(public _http: Http)

    let injector = Injector.resolveAndCreate([loggerService]);
    let logger = injector.get(loggerService);

    try 
        return this._http.get('/app/config.json',
        
            headers: contentHeaders
        )
        .map((res: any) =>
        
            let data = <configModel>res.json();
            this.url = data.urlServer;
            JSON.stringify(this.url);
        );
    
    catch (ex) 
        logger.registarErros('configService', ex);
    


returnConfig()

    return this.url;

现在我的另一个组件

constructor(public _http: Http, public config: configService)

    this.token = sessionStorage.getItem('token');
    this.username = sessionStorage.getItem('username');


login(username: String, password: String)

    let injector = Injector.resolveAndCreate([loggerService]);
    let logger = injector.get(loggerService);

    try
    
        alert(this.config.url);
        return this._http.post('http://localhost:56877/api/Login/EfectuaLogin', JSON.stringify( username, password ),
        
            headers: contentHeaders
        )
        .map((res: any) => 
        
            let data = <authLoginModel>res.json();
            this.token = data.token;
            this.username = data.nome;
            sessionStorage.setItem('token', this.token);
            sessionStorage.setItem('username', this.username);
            return Observable.of('authObservable');
        );
    
    catch (ex) 
        logger.registarErros('authentication', ex);  
    

我不再知道如何解决这个问题，我需要你的帮助，我对 Angular 2 不是很有经验。 非常感谢。

【参考方案1】：

这里的问题是配置是异步加载的。您可以利用 flatMap 运算符来使用类似的东西：

@Injectable()
export class ConfigService 
  urlServer:string;

  constructor(public _http: Http) 
  

  getConfig() 
    if (this.urlServer) 
      return Observable.of(this.urlServer);
    

    return this._http.get('/app/config.json', 
      headers: contentHeaders
    )
    .map((res: any) => 
      let data = <configModel>res.json();
      return data.urlServer;
    ).do(urlServer => 
      this.urlServer = urlServer;
    );
  

在你的组件中：

login(username: String, password: String) 
  return this.configService.getConfig().flatMap(urlServer => 
    this._http.post('http://localhost:56877/api/Login/EfectuaLogin',  
      JSON.stringify( username, password ),
      
        headers: contentHeaders
      )
      .map((res: any) => 
      
        let data = <authLoginModel>res.json();
        this.token = data.token;
        this.username = data.nome;
        sessionStorage.setItem('token', this.token);
        sessionStorage.setItem('username', this.username);
        return data; // or something else
      );
    
  );

另一种方法是在加载配置后异步自举：

var app = platform(BROWSER_PROVIDERS)
   .application([BROWSER_APP_PROVIDERS, appProviders]);

service.getConfig().flatMap((url) => 
  var configProvider = new Provider('urlServer',  useValue: urlServer);
  return app.bootstrap(appComponentType, [ configProvider ]);
).toPromise();

第二种方法见这个问题：

angular2 bootstrap with data from ajax call(s)

您可以通过将最后一种方法与 CustomRequestOptions 混合使用更进一步：

import BaseRequestOptions, RequestOptions, RequestOptionsArgs from 'angular2/http';

export class CustomRequestOptions extends BaseRequestOptions 
  merge(options?:RequestOptionsArgs):RequestOptions 
    options.url = 'http://10.7.18.21:8080/api' + options.url;
    return super.merge(options);
  

看到这个问题：

Angular 2 - global variable for all components

【讨论】：

您好，我尝试这样做，但返回“[object object]”：/

哦，是的。您不能在为 map 运算符定义的回调中使用 Observable.of。我相应地更新了任何答案...

但是如果我不使用我的 Observable.Of，我的登录不起作用，我想更改此“this._http.post('localhost:56877/api/Login/EfectuaLogin',”例如“this._http .post(this.config.url+'/api/Login/EfectuaLogin',"