관찰 가능한 서브스크립션이 포함된 함수의 값을 반환하려면 어떻게 해야 합니까?
Observable이 존재하는 함수에 의해 반환될 Observable에서 값을 추출하는 방법을 모릅니다.난 그것으로부터 값만 돌려받으면 돼, 다른 건 없어
동작하는 최신 버전
function getValueFromObservable() {
this.store.subscribe(
(data:any) => {
console.log(data)
}
)
}
getValueFromObservable()
이 기능이 작동하여 가치가 반환되도록 기능하고, 그 다음:
function getValueFromObservable() {
this.store.subscribe(
(data:any) => {
return data
}
)
}
console.log(getValueFromObservable())
내가 여기서 뭘 잘못하고 있는 거지?
EDIT: 최신 버전의 RXJS에서 파이프가 동작하는 방법에 대한 변경을 반영하기 위해 코드가 갱신되었습니다.모든 연산자(이 예에서는 take)가 pipe() 연산자로 랩됩니다.
이 질문은 오래 전 일이기 때문에 지금쯤은 적절한 해결책이 있을 것입니다만, 이것을 찾고 있는 사람에게는, 비동기 패턴을 지키겠다는 약속으로 해결하는 것을 추천합니다.
보다 상세한 버전은 새로운 Promise를 작성하는 것입니다.
function getValueFromObservable() {
return new Promise(resolve=>{
this.store.pipe(
take(1) //useful if you need the data once and don't want to manually cancel the subscription again
)
.subscribe(
(data:any) => {
console.log(data);
resolve(data);
})
})
}
수신측에서는, 다음과 같은 방법으로 해결의 약속을 「대기」할 수 있습니다.
getValueFromObservable()
.then((data:any)=>{
//... continue with anything depending on "data" after the Promise has resolved
})
보다 슬림한 솔루션은 RxJs의 .toPromise()를 사용하는 것입니다.
function getValueFromObservable() {
return this.store.pipe(take(1))
.toPromise()
}
물론 수신측도 위와 같습니다.
은 꼭 .Observable
컴포넌트에서 오브젝트를 보유하는 클래스 멤버를 선언해야 합니다(컴포넌트에서 사용할 것).
export class MyComponent {
name: string = "";
}
a는 a.ServiceObservable:
getValueFromObservable():Observable<string> {
return this.store.map(res => res.json());
}
Component값을 할 수 .예를 들어, 를 들어, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」, 「 」의 값을 취득할 수 있습니다.
OnInit(){
this.yourServiceName.getValueFromObservable()
.subscribe(res => this.name = res.name)
}
하다에서 합니다.Observable★★★★
합니다.name:
<div> {{ name }} </div>
다른 사용법Observableasync파이프 http://briantroncone.com/?p=623
주의: 질문 내용이 다를 경우 질문을 업데이트하십시오.
반환되는 동일한 Observable을 사전 구독하려면
.do():
function getValueFromObservable() {
return this.store.do(
(data:any) => {
console.log("Line 1: " +data);
}
);
}
getValueFromObservable().subscribe(
(data:any) => {
console.log("Line 2: " +data)
}
);
문제는 데이터가 관찰 가능한 내부에서 캡처되고 콘솔 로그만 기록할 수 있다는 것입니다.해당 값이 있는 함수를 호출하여 해당 값과 console.log 또는 다른 파일에서 반환하고 싶습니다.
관측 가능한 물체가 방출될 때와 방출 후에 "전류 값" 게터를 찾고 있는 것 같습니다.
Subject ★★★★★★★★★★★★★★★★★」Observable그런 게 없어요.되면, 그와 「」에 .Observable이제 끝이야.
하면 .BehaviorSubject는, 마지막에 해, 합니다.
, ,가 붙어있어요.getValue()현재 값을 얻는 방법
상세 정보:
RxJs Subject 또는 Observable의 현재 값을 얻는 방법
앞의 답변은 어느 정도 효과가 있을 수 있지만, 관찰 가능한 것을 계속 사용하고 싶다면 Behavior Subject를 사용하는 것이 올바른 방법이라고 생각합니다.
예:
this.store.subscribe(
(data:any) => {
myService.myBehaviorSubject.next(data)
}
)
서비스 내용:
let myBehaviorSubject = new BehaviorSubjet(value);
component.ts의 경우:
this.myService.myBehaviorSubject.subscribe(data => this.myData = data)
도움이 됐으면 좋겠네요!
관측 가능한 값은 모든 위치에서 검색할 수 있습니다.소스 시퀀스는 먼저 다른 곳에서 방출할 수 있는 특별한 관찰자에게 푸시됩니다.이것은 Reactive Extensions(RxJ)의 Subject 클래스로 실현됩니다.
var subject = new Rx.AsyncSubject(); // store-last-value method
관찰자에 값을 저장합니다.
subject.next(value); // store value
subject.complete(); // publish only when sequence is completed
다른 곳에서 값을 가져오려면 다음과 같이 옵서버에 가입합니다.
subject.subscribe({
next: (response) => {
//do stuff. The property name "response" references the value
}
});
실험 대상은 관찰 가능 및 관찰자입니다.다른 사용 시나리오의 경우 BehaviorSubject 및 ReplaySubject와 같은 다른 제목 유형이 있습니다.
RxJ를 Import하는 것을 잊지 마십시오.
var Rx = require('rxjs');
적절한 방법은 함수에서 관측 가능한 것을 반환하고 필요한 경우 언제든지 구독하는 것입니다. 관측 가능한 것은 게을러지기 때문에 구독할 때만 값을 방출하기 시작합니다.
이 밖에도 이벤트 주도형 솔루션이 하나 더 있습니다.처음에는 이 솔루션을 사용하고 있었습니다.다음 예제에서는 nodejs의 "이벤트" 모듈을 사용하여 이를 수행합니다.유사한 모듈이 존재하는 다른 프레임워크와 함께 사용할 수 있습니다(주의: 구문 및 스타일은 사용하는 모듈에 따라 달라질 수 있습니다).
var from =require("rxjs").from;
var map = require("rxjs/operators").map;
var EventEmitter = require("events");
function process(event) {
from([1,2,3]).pipe(
map(val => `The number is:: ${val}`)
).subscribe((data) => {
event.emit("Event1", data); //emit value received in subscribe to the "Event1" listener
});
}
function main() {
class Emitter extends EventEmitter{};
var event = new Emitter(); //creating an event
event.on("Event1", (data)=>{ //listening to the event of name "Event1" and callback to log returned result
console.log(data); //here log, print, play with the data you receive
});
process(event); //pass the event to the function which returns observable.
}
main(); //invoke main function
발신과 청취의 방법으로, 다른 장소의 데이터를 전달할 수 있는 아이디어를 제시하는 것에 지나지 않습니다.이것은 이벤트 구동 코드라고도 합니다.
클라이언트에 데이터가 저장되어 있는지, API 호출을 통해 서버에서 데이터를 가져와야 하는지 확인하고 싶었습니다.그런 다음 새로운 관찰자를 돌려보내고 여기에 가입하면 효과가 있었습니다.서버에서 데이터를 처음 가져온 후 이 값이 반환됩니다.API가 호출되고 데이터가 반환된 후 이 데이터를 설정했기 때문에 allUsers입니다.
private _allUsers: EnconUser[] = undefined;
get allUsers(): EnconUser[]
{
return this._allUsers;
}
set allUsers(value: EnconUser[])
{
this.storage.store('allUsers', value);
this._allUsers = value;
}
public getAllUsers() : Observable<EnconUser[]>
{
if (this.allUsers == undefined)
{
return new Observable((obs) => {this.httpClient.get<EnconUser[]>(`http://api/getallusers`).subscribe(data=>{this.allUsers=data; obs.next(data); })});
}
else
{
return new Observable((obs) => {
obs.next(this.allUsers);
});
}
}
예를 들어 html 템플릿은 다음과 같습니다.
<select class="custom-select d-block w-100" id="genre" name="genre"
[(ngModel)]="film.genre"
#genreInput="ngModel"
required>
<option value="">Choose...</option>
<option *ngFor="let genre of genres;" [value]="genre.value">{{genre.name}}</option>
</select>
다음 필드는 내 컴포넌트의 템플릿으로 바인드된 필드입니다.
// Genres of films like action or drama that will populate dropdown list.
genres: Genre[];
서버에서 동적으로 영화 장르를 가져옵니다.작성한 서버와 통신하려면FilmService
서버에 통신하는 방법은 다음과 같습니다.
fetchGenres(): Observable<Genre[]> {
return this.client.get(WebUtils.RESOURCE_HOST_API + 'film' + '/genre') as Observable<Genre[]>;
}
이 메서드가 반환되는 이유Observable<Genre[]>와는 전혀 다르다Genre[]?
JavaScript는async또한 비싼 프로세스 후에 값이 반환되는 메서드를 기다리지 않습니다.고가의 경우, 가치를 되돌리는 데 시간이 걸리는 프로세스를 의미합니다.서버에서 데이터를 가져오는 것과 같습니다.따라서 Observable의 참조를 반환하고 구독해야 합니다.
예를 들어 [My Component]의 경우:
ngOnInit() {
this.filmService.fetchGenres().subscribe(
val => this.genres = val
);
}
function getValueFromObservable() {
this.store.subscribe(
(data:any) => {
return data
}
)
}
console.log(getValueFromObservable())
위의 console.log가 약속 해결 전에 실행되어 값이 표시되지 않는 경우 다음과 같이 변경합니다.
function getValueFromObservable() {
return this.store
}
getValueFromObservable()
.subscribe((data: any) => {
// do something here with data
console.log(data);
});
다른 솔루션은 getValueFromObservable 내의 데이터를 사용하여 연산자의 관측 가능한 사용을 반환하고 함수를 서브스크라이브하는 경우입니다.
function getValueFromObservable() {
return this.store.subscribe((data: any) => {
// do something with data here
console.log(data);
//return again observable.
return of(data);
})
}
getValueFromObservable()
.subscribe((data: any) => {
// do something here with data
console.log(data);
});
javascript의 단일 스레드, 비동기, 약속 지향, 반응적 경향의 세계에서async/await명령형 프로그래머의 가장 친한 친구입니다.
(async()=>{
const store = of("someValue");
function getValueFromObservable () {
return store.toPromise();
}
console.log(await getValueFromObservable())
})();
그리고 만약을 위해store는 여러 값의 시퀀스입니다.
const aiFrom = require('ix/asynciterable').from;
(async function() {
const store = from(["someValue","someOtherValue"]);
function getValuesFromObservable () {
return aiFrom(store);
}
for await (let num of getValuesFromObservable()) {
console.log(num);
}
})();
함수에서 관측 가능한 값을 반환합니다.
rxjs Function.ts
import { Observable } from 'rxjs'
export function getValueFromObservable() {
return new Observable( (obs) => {
obs.next(5);
})
}
메인
import { getValueFromObservable } from "./rxjsFunction";
getValueFromObservable().subscribe((value) => {
next: console.log(value);
});
언급URL : https://stackoverflow.com/questions/38291783/how-to-return-value-from-function-which-has-observable-subscription-inside
'source' 카테고리의 다른 글
| 컨트롤러를 글로벌하게 하지 않고 Angular에서 유닛 테스트 지시 컨트롤러 (0) | 2023.03.18 |
|---|---|
| GraphQL에서 "edge"와 "node"의 의미는 무엇입니까? (0) | 2023.03.18 |
| Angular js에서 모듈 오류를 인스턴스화하지 못했습니다. (0) | 2023.03.18 |
| wordpress Rest API에서 wp_head 또는 wp_footer를 outuput합니다. (0) | 2023.03.18 |
| Angular's $watch를 컨트롤러에 사용하는 것은 반향기입니까? (0) | 2023.03.18 |