合并 api 请求

Question

我是 Angular2 的新手，刚开始使用 Http 请求和可观察对象。之前我使用 .NET 和 MySql，现在我正在尝试学习使用来自 API 的数据的最佳实践。

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

phone号码的前缀是一个带有国家代码和前缀f.ex的下拉列表。德国 +49 因此我需要一个对象：{ “德国”:”49”, 柬埔寨:”855” ....}

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

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

根据这 2 个请求，我使用下面的代码创建了新的 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());
    }    

}

我导入 CountryService

的 userform.component 中的代码

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。它结合了 2 个流，让您可以根据 2 个来源定义输出数据：

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;
    });
}

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

合并 api 请求

Combining api request

json

httprequest

observable

angular