javascript - RxJS 使用第一个流的输出运行第二个流

Question

我有一个服务，它确定位置，它被写为 Observable

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

const GEOLOCATION_ERRORS = {
    'errors.location.unsupportedBrowser': 'Browser does not support location services',
    'errors.location.permissionDenied': 'You have rejected access to your location',
    'errors.location.positionUnavailable': 'Unable to determine your location',
    'errors.location.timeout': 'Service timeout has been reached'
};

@Injectable()
export class GeolocationService {
    public getLocation(opts): Observable<any> {
        return Observable.create(observer => {
            if (window.navigator && window.navigator.geolocation) {
                window.navigator.geolocation.getCurrentPosition(
                    (position) => {
                        observer.next(position);
                        observer.complete();
                    },
                    (error) => {
                        switch (error.code) {
                            case 1:
                                observer.error(GEOLOCATION_ERRORS['errors.location.permissionDenied']);
                                break;
                            case 2:
                                observer.error(GEOLOCATION_ERRORS['errors.location.positionUnavailable']);
                                break;
                            case 3:
                                observer.error(GEOLOCATION_ERRORS['errors.location.timeout']);
                                break;
                        }
                    }, opts);
            } else {
                observer.error(GEOLOCATION_ERRORS['errors.location.unsupportedBrowser']);
            }
        });
    }
}

export var GeolocationServiceInjectables: Array<any> = [
    { provide: GeolocationService, useClass: GeolocationService }
];

然后在我的 HttpService 中，我想使用位置服务的输出构建查询 URL

import { Observable } from 'rxjs/Observable';
import { Injectable, Inject } from '@angular/core';
import { Http, Response } from '@angular/http';
import { GeolocationService } from './location.service';
import { WeatherItem } from '../weather-item/weather-item.model';

export const OpenWeatherMap_API_KEY: string = 'SOME_API_KEY';
export const OpenWeatherMap_API_URL: string = 'http://api.openweathermap.org/data/2.5/forecast';

@Injectable()
export class HttpService {
    constructor(private http: Http,
        private geolocation: GeolocationService,
        @Inject(OpenWeatherMap_API_KEY) private apiKey: string,
        @Inject(OpenWeatherMap_API_URL) private apiUrl: string) {
    }

    prepaireQuery(): void {
        this.geolocation.getLocation({ enableHighAccuracy: false, maximumAge: 3 }).subscribe(
            (position) => {
                let params: string = [
                    `lat=${position.latitude}`,
                    `lon=${position.longitude}`,
                    `APPID=${this.apiKey}`,
                ].join('&');
              //  return `${this.apiUrl}?${params}`;
            }
        );

    }

    getWeather(): Observable<WeatherItem[]> {
        return this.http.get(/*there should be the url*/)
            .map((response: Response) => {
                return (<any>response.json()).items.map(item => {
                    const city = {
                        city: item.city.name,
                        country: item.city.country,
                    }
                    return item.list.map(entity => {
                        return new WeatherItem({
                            temp: entity.main.temp,
                            temMin: entity.main.temp_min,
                            temMax: entity.main.temp_max,
                            weatherCond: entity.weather.main,
                            description: entity.weather.description,
                            windSpeed: entity.wind.speed,
                            icon: entity.weather.icon,
                            city,
                        })
                    })
                })
            })
    }
}
export var HttpServiceInjectables: Array<any> = [
    { provide: HttpService, useClass: HttpService },
    { provide: OpenWeatherMap_API_KEY, useValue: OpenWeatherMap_API_KEY },
    { provide: OpenWeatherMap_API_URL, useValue: OpenWeatherMap_API_KEY }
];

问题是如何在请求之前获取URL。我见过使用 unsubscribe() 的解决方案，但我认为它们不太好。我考虑过 merge() 但我不确定这是否是我真正想要的。

Answer 1

您可能正在寻找 RxJs 的 mergeMap 运算符。

mergeMap 的作用是自动订阅源可观察量，然后让您在内部可观察量中使用其结果，最后压平您的输出。

在此示例中，您调用 firstUrl 并在第二次调用 secondUrl 时使用从该请求获得的结果:

this.http.get(`{firstUrl}`)
   .mergeMap(res => this.http.get(`{secondUrl}/{res.json()}`))
   .subscribe(...)

我没有针对您的代码具体说明，因为我不确定您到底想要做什么。但我希望这能对您有所帮助!