Estoy usando Firebase Storage y estoy tratando de cargar todos los activos a través de una llamada de función. La única forma de obtener una URL de activos es llamar a getDownloadURL que devuelve una promesa. Necesito llamar a esto para cada activo, pero no puedo hacerlo esperar a que se cumplan todas las promesas antes de continuar por algún motivo.
Pensé que devolver una promesa de mergeMap los haría esperar a todos, pero ese no parece ser el caso.
He mirado una serie de preguntas con respecto a las promesas y RXJS, pero parece que no puedo averiguar qué está mal con el código.
getAssets() { return this.authService.user$.pipe( first(), switchMap(user => defer(() => from(this.afs.storage.ref(`${user.uid}/assets`).listAll()))), switchMap(assets => from(assets.items).pipe( mergeMap(async (asset) => { return new Promise((res, rej) => { asset.getDownloadURL().then(url => { const _asset = { name: asset.name, url, }; this.assets.push(_asset); res(_asset); }) .catch((e) => rej(e)); }); }), )), map(() => this.assets), ); } ... this.getAssets().subscribe(assets => console.log(assets)); // this runs before all asset's url has been resolved mergeMap no espera todos los observables internos. Hace girar n tuberías observables internas que se ejecutan en paralelo y escupe todos los valores del mismo acoplamiento en la parte inferior de la tubería (su declaración de suscripción en este caso) como emisiones individuales. Por lo tanto, el motivo por el que this.getAssets().subscribe(assets => console.log(assets)) se ejecuta antes de que todas las canalizaciones internas paralelas de mergeMap completen sus cálculos individuales, porque mergeMap no espera a que se completen todas antes de emitir (emitirá una por uno cuando terminan). Si desea esperar a que terminen n tuberías observables, debe usar forkJoin .
forkJoin se usa mejor cuando tiene un grupo de observables y solo se preocupa por el valor final emitido de cada uno. Un caso de uso común para esto es si desea emitir múltiples solicitudes en la carga de la página (o algún otro evento) y solo desea tomar medidas cuando se ha recibido una respuesta para todos. De esta manera, es similar a cómo puede usar Promise.all.
getAssets(): Observable<Asset[]> { return this.authService.user$.pipe( // first() will deliver an EmptyError to the observer's error callback if the // observable completes before any next notification was sent. If you don't // want this behavior, use take(1) instead. first(), // Switch to users firebase asset stream. switchMap(user => { // You might have to tweak this part. I'm not exactly sure what // listAll() returns. I guessed that it returns a promise with // firebase asset metadata. return from(this.afs.storage.ref(`${user.uid}/assets`).listAll()); }), // Map to objects that contain method to get image url. map(firebaseAssetMetadata => firebaseAssetMetadata?.items ?? []), // Switch to parallel getDownloadUrl streams. switchMap(assets => { // Not an rxjs map, a regular list map. Returns a list of getAssetUrlPipes. const parallelGetAssetUrlPipes = assets.map(asset => { return from(asset.getDownloadUrl()).pipe( map(url => { name: asset.name, url }) ); }); // 1) Listen to all parallel pipes. // 2) Wait until they've all completed. // 3) Merge all parallel data into a list. // 4) Then move list down the pipe. return forkJoin(parallelGetAssetUrlPipes); }), // Outputs all parallel pipe data as a single emission in list form. // Set local variable to users asset data. tap(assetObjects => this.assets = assetObjects) ); } // Outputs the list of user asset data. this.getAssets().subscribe(console.log);¡Buena suerte y disfruta de tus albóndigas suecas!
const { from } = rxjs const { mergeMap } = rxjs.operators const assets = [1,2,3,4,5] function getUrl (index) { return new Promise((res) => { setTimeout(() => res(`http://example.com/${index}`), Math.random() * 3 + 1000) }) } // add param2 1 for mergeMap === concatMap from(assets).pipe( mergeMap(asset => { return getUrl(asset) }, 1) ).subscribe(console.log) <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.5.5/rxjs.umd.min.js"></script> use concatMap para ejecutar uno por uno.