Skip to content

Fin sección 10

Latest
Latest
Compare
Choose a tag to compare
@alesyt0h alesyt0h released this 03 Oct 08:21
· 2 commits to main since this release
v1.0
9a3fba7

Operadores y métodos de combinación

  • startWith(Operador): Nos permite hacer una emisión o emisiones del argumento o argumentos pasado antes de que el observable EMPIECE a emitir. Pueden ser strings, numeros, arrays, otro observable etc.. Muy útil para cargar un loading mientras se efectua una petición HTTP startWith('a','b','c')
  • endWith(Operador): Nos permite hacer una emisión o emisiones del argumento o argumentos pasado antes de que el observable se COMPLETE. Pueden ser strings, numeros, arrays, otro observable etc.. endWith('a')
  • concat(Método): Método que nos permite encadenar observables, puede recibir tantos observables como queramos, hasta que el primer observable no se complete, no se ejecutaria el segundo. concat puede recibir también un array en lugar de un observable: concat(of(1,2,3,4), of(1,2), [1,2,3])
  • zip: Combina multiples observables y retorna un observable cuyos valores son los valores en orden de los observables pasados como argumento. zip(of(1),of(2)) devolveria un array de: [1, 2]
  • merge(Método): Este método recibe uno o más observables y la salida va a ser el resultado de ambos observables combinados.
merge(
    keyup$.pipe(map(e => e.type)), 
    click$.pipe(map(e => e.type))
).subscribe(console.log);
  • combineLatest(Método): Es un método con que nos permite mandar observables como argumentos(Deben de ser mandados como un array), combinarlos y emitir los valores de todos los observables internos simultáneamente. Este regresa un nuevo observable, el cual va a emitir valores hasta que todos los observables internos hayan emitido por lo menos un valor. Se deben completar todos los observables internos antes de que se complete el combineLatest.
// Hasta pasados 2 segundos, no comenzaria a emitir nada y empezaria emitiendo un array de [1, 0] .. 1 
// Porque el primer observable ya era su segundo valor, y 0 por que el segundo intervalo acaba de comenzar a emitir.
combineLatest([
    interval(1000),
    interval(2000) // Si este segundo intervalo se completase, el valor emitido por el primer intervalo seguiria 
                   // siendo combinado con la última emisión de este intervalo: [2, 5], [3, 5], [4, 5] ...
]).subscribe(console.log)
  • forkJoin(Método): Recibe varios observables como argumentos(Deben de ser mandados como un array o un objeto). Estos observables deben de ser FINITOS, es decir, deben de completarse en algún momento, si no el forkJoin no emitiría ningún valor. Una vez completados todos los observables, retornaria el último valor de todos los observables como un array u objeto. Si uno de los observables da un error, todo el forkJoin fallaria, habria que pasar individualmente el observable con error por un pipe y un catchError para poder recibir los valores de los observables que no estan fallando.
const numeros$   = of(1,2,3,4);
const intervalo$ = interval(1000).pipe(take(3));
const letras$    = of('a','b','c').pipe(delay(3500));

forkJoin([
    numeros$,   // 4
    intervalo$, // 2
    letras$     // c
]).subscribe(console.log); // [4, 2, c]

forkJoin({
    num: numeros$,   // 4
    int: intervalo$, // 2
    let: letras$     // c
}).subscribe(console.log); // {num: 4, int: 2, let: c}

// La manera más usada del forkJoin es con peticiones AJAX
forkJoin({
    usuario: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}`),
    repos: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/repo123123s`).pipe(catchError(err => of([]))),
    gists: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/gists`),
}).subscribe(console.log);
Assets 2
Loading