Последовательность RxJS эквивалентна обещанию.then()?
Раньше я много развивался с обещанием, и теперь я перехожу на RxJS. Документ RxJS не дает очень четкого примера того, как перейти от цепочки обещаний к последовательности наблюдателя.
Например, я обычно пишу цепочку обещаний с несколькими шагами, например
// a function that returns a promise
getPromise()
.then(function(result) {
// do something
})
.then(function(result) {
// do something
})
.then(function(result) {
// do something
})
.catch(function(err) {
// handle error
});
Как мне переписать эту цепочку обещаний в стиле RxJS?
2 ответа
Для потока данных (эквивалентно then):
Rx.Observable.fromPromise(...)
.flatMap(function(result) {
// do something
})
.flatMap(function(result) {
// do something
})
.subscribe(function onNext(result) {
// end of chain
}, function onError(error) {
// process the error
});
Обещание может быть преобразовано в наблюдаемое с Rx.Observable.fromPromise,
Некоторые операторы обещают прямой перевод. Например RSVP.all, или же jQuery.when можно заменить на Rx.Observable.forkJoin,
Имейте в виду, что у вас есть несколько операторов, которые позволяют асинхронно преобразовывать данные, и выполнять задачи, которые вы не можете или не хотите выполнять с обещаниями. Rxjs раскрывает все свои возможности с помощью асинхронных последовательностей данных (последовательность, т.е. более 1 асинхронного значения).
Для управления ошибками предмет немного сложнее.
- есть операторы catch и наконец тоже
retryWhenтакже может помочь повторить последовательность в случае ошибки- Вы также можете устранить ошибки в самом подписчике с помощью
onErrorфункция.
Чтобы получить точную семантику, ознакомьтесь с документацией и примерами, которые можно найти в Интернете, или задайте конкретные вопросы здесь.
Это определенно было бы хорошей отправной точкой для углубления управления ошибками с помощью Rxjs: https://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/error_handling.html
Более современная альтернатива:
import {fromPromise} from 'rxjs/observable/fromPromise';
import {catchError, flatMap} from 'rxjs/operators';
fromPromise(...).pipe(
flatMap(result => {
// do something
}),
flatMap(result => {
// do something
}),
flatMap(result => {
// do something
}),
catchError(error => {
// handle error
})
)
Обновление мая 2019 года с использованием RxJs 6
Согласитесь с приведенными выше ответами, хотел бы добавить конкретный пример с некоторыми игрушечными данными и простыми обещаниями (с setTimeout), используя RxJs v6 для большей ясности.
Просто обновите переданный идентификатор (в настоящее время жестко 1) к чему-то, что не существует, чтобы выполнить логику обработки ошибок тоже. Важно также отметить использование of с catchError сообщение.
import { from as fromPromise, of } from "rxjs";
import { catchError, flatMap, tap } from "rxjs/operators";
const posts = [
{ title: "I love JavaScript", author: "Wes Bos", id: 1 },
{ title: "CSS!", author: "Chris Coyier", id: 2 },
{ title: "Dev tools tricks", author: "Addy Osmani", id: 3 }
];
const authors = [
{ name: "Wes Bos", twitter: "@wesbos", bio: "Canadian Developer" },
{
name: "Chris Coyier",
twitter: "@chriscoyier",
bio: "CSS Tricks and CodePen"
},
{ name: "Addy Osmani", twitter: "@addyosmani", bio: "Googler" }
];
function getPostById(id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const post = posts.find(post => post.id === id);
if (post) {
console.log("ok, post found!");
resolve(post);
} else {
reject(Error("Post not found!"));
}
}, 200);
});
}
function hydrateAuthor(post) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const authorDetails = authors.find(person => person.name === post.author);
if (authorDetails) {
post.author = authorDetails;
console.log("ok, post hydrated with author info");
resolve(post);
} else {
reject(Error("Author not Found!"));
}
}, 200);
});
}
function dehydratePostTitle(post) {
return new Promise((resolve, reject) => {
setTimeout(() => {
delete post.title;
console.log("ok, applied transformation to remove title");
resolve(post);
}, 200);
});
}
// ok, here is how it looks regarding this question..
let source$ = fromPromise(getPostById(1)).pipe(
flatMap(post => {
return hydrateAuthor(post);
}),
flatMap(post => {
return dehydratePostTitle(post);
}),
catchError(error => of(`Caught error: ${error}`))
);
source$.subscribe(console.log);
Выходные данные:
ok, post found!
ok, post hydrated with author info
ok, applied transformation to remove title
{ author:
{ name: 'Wes Bos',
twitter: '@wesbos',
bio: 'Canadian Developer' },
id: 1 }
Ключевая часть, эквивалентна следующей, использующей простой поток управления обещаниями:
getPostById(1)
.then(post => {
return hydrateAuthor(post);
})
.then(post => {
return dehydratePostTitle(post);
})
.then(author => {
console.log(author);
})
.catch(err => {
console.error(err);
});
Если я правильно понял, вы имеете в виду использование значений, и в этом случае вы используете sbuscribe, т.е.
const arrObservable = from([1,2,3,4,5,6,7,8]);
arrObservable.subscribe(number => console.log(num) );
Кроме того, вы можете просто превратить наблюдаемое в обещание, используя toPromise(), как показано:
arrObservable.toPromise().then()
Насколько я только что узнал, если вы возвращаете результат в flatMap, он преобразует его в массив, даже если вы вернули строку.
Но если вы возвращаете Observable, эта Observable может вернуть строку;
Если getPromise функция находится в середине потока, вы должны просто обернуть его в одну из функций mergeMap, switchMap или же concatMap (обычно mergeMap):
stream$.pipe(
mergeMap(data => getPromise(data)),
filter(...),
map(...)
).subscribe(...);
если вы хотите начать свой поток с getPromise() затем оберните это в from функция:
import {from} from 'rxjs';
from(getPromise()).pipe(
filter(...)
map(...)
).subscribe(...);
Вот как я это сделал.
предварительно
public fetchContacts(onCompleteFn: (response: gapi.client.Response<gapi.client.people.ListConnectionsResponse>) => void) {
const request = gapi.client.people.people.connections.list({
resourceName: 'people/me',
pageSize: 100,
personFields: 'phoneNumbers,organizations,emailAddresses,names'
}).then(response => {
onCompleteFn(response as gapi.client.Response<gapi.client.people.ListConnectionsResponse>);
});
}
// caller:
this.gapi.fetchContacts((rsp: gapi.client.Response<gapi.client.people.ListConnectionsResponse>) => {
// handle rsp;
});
После того, как (ют?)
public fetchContacts(): Observable<gapi.client.Response<gapi.client.people.ListConnectionsResponse>> {
return from(
new Promise((resolve, reject) => {
gapi.client.people.people.connections.list({
resourceName: 'people/me',
pageSize: 100,
personFields: 'phoneNumbers,organizations,emailAddresses,names'
}).then(result => {
resolve(result);
});
})
).pipe(map((result: gapi.client.Response<gapi.client.people.ListConnectionsResponse>) => {
return result; //map is not really required if you not changing anything in the response. you can just return the from() and caller would subscribe to it.
}));
}
// caller
this.gapi.fetchContacts().subscribe(((rsp: gapi.client.Response<gapi.client.people.ListConnectionsResponse>) => {
// handle rsp
}), (error) => {
// handle error
});
Последовательность RxJS, эквивалентная обещанию.then()?
Например
function getdata1 (argument) {
return this.http.get(url)
.map((res: Response) => res.json());
}
function getdata2 (argument) {
return this.http.get(url)
.map((res: Response) => res.json());
}
getdata1.subscribe((data1: any) => {
console.log("got data one. get data 2 now");
getdata2.subscribe((data2: any) => {
console.log("got data one and two here");
});
});