Question

我是Angular2的新手，刚开始使用Http请求和observable。以前我使用.NET和MySql，现在我正在尝试学习使用API数据的最佳实践。

我习惯连接表，我想找到合并json数据的最佳方法。在此示例中，我希望用户填写表单并键入他的电话号码。

电话号码的前缀是一个下拉列表，其国家代码和前缀为f.ex.德国+49 因此我需要一个对象：{“德国”：“49”，柬埔寨：＆＃34; 855＆＃34; ...}

我向country.io发送了2个http请求：

  http://country.io/phone.json  // e.g. DE: “Germany”
  http://country.io/names.json // e.g. DE: “49”

从这两个请求我使用下面的代码制作我的新json对象：myPhonePrefixObject

我认为代码太长了，而且必须能够以更好的方式完成。

国家service.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class CountryService {

    constructor(  private _http:Http) { }

    getCountryCode(): Observable<any> {      
       return this._http.get('http://crossorigin.me/http://country.io/phone.json')
            .map(countryCodes => countryCodes.json());
    }

    getPhonePrefix(): Observable<any> {      
       return this._http.get('http://crossorigin.me/http://country.io/names.json')
            .map(phonePrefix => phonePrefix.json());
    }    

}

我在userform.component中导入CountryService

的代码

myPhonePrefixObject; 

this.countryPhonePrefix()
    .then((pp) => {
        myPhonePrefixObject = pp;
    })
    .catch((err) => {
        console.log(err);
    });


 private getCountryCode() {
 return new Promise((resolve) => {
    this._countryService.getCountryCode()
        .subscribe(
            res => resolve(res)
        ); 
 });      
}


private getPhonePrefix() {
 return new Promise((resolve, reject) => {
    return this._countryService.getPhonePrefix()
        .subscribe(
            res => resolve(res),
            error => reject(error)
        );
 });                 
}


private countryPhonePrefix() {
 return new Promise((resolve, reject) => {
    let cc: Object;
    this.getCountryCode()
        .then((cCode) => {
            cc = cCode;
            return this.getPhonePrefix()
        })
        .then((pPrefix) => {
            let pp: Object = {};
            Object.keys(cc).forEach((key, index) => {
                pp[cc[key]] = pPrefix[key];
            });               
            resolve(pp);
        })
        .catch((err) => {
            reject(err);
        }); 
 });      
}

Answer 1

.NET开发人员也在这里！

要处理多个流，您需要聚合方法。在这种情况下，您希望根据2个流（HTTP请求）的结果生成对象，您要查找的聚合方法是combineLatest。它结合了两个流，让您根据两个来源定义输出数据：

getCombinedData(): Observable<Data> {
  return this.getCountryPhones().combineLatest(this.getCountryNames(),
    (phoneData, nameData) => {
      var resultData = {};
      Object.keys(nameData).forEach((key) => {
        resultData[nameData[key]] = phoneData[key];
      });

      return resultData;
    });
}

Plunker：http://plnkr.co/edit/agUPNujG3NnbKI6J3ZVJ?p=preview

结合api请求

1 个答案: