Tengo un caso de uso en el que tengo que llamar a $http.post(request) en lotes de datos de entrada. Para esto, creé una serie de solicitudes. Para cada uno de ellos, necesito obtener la respuesta de $http.post() , agregarla a una matriz existente y pasarla a una función de representación. Tengo que hacer la siguiente llamada solo cuando se complete la anterior y dado que $http.post() devuelve una promesa ( de acuerdo con esto ), estoy tratando de hacer esto usando la función de reduce .
function callToHttpPost(request) { return $http.post('someurl', request); } function outerFunc($scope, someId) { let completeArray = []; let arrayOfRequests = getRequestInBatches(); arrayOfRequests.reduce((promiseChain, currentRequest) => { console.log(promiseChain); return promiseChain.then((previousResponse) => { completeArray.push.apply(completeArray, previousResponse.data); render($scope, completeArray, someId); return callToHttpPost(currentRequest); }); }, Promise.resolve()).catch(e => errorHandler($scope, e, someId)); }(Me he referido a MDN y esta respuesta )
Pero esto me da TypeError: previousResponse is undefined . La declaración de registro muestra la primera promesa como resuelta (ya que es el valor inicial pasado a la función de reduce ), pero las otras promesas aparecen como rejected debido a este error. ¿Cómo puedo resolver esto?
Si la función outerFunc se puede usar en un contexto async (que parece que se puede, dado que no devuelve nada y los resultados se pasan a la función de render a medida que se construyen), podría limpiarlo de inmediato, reduciéndolo a:
async function outerFunc ($scope, someId) { const completeArray = []; try { for (const request of getRequestInBatches()) { const { data } = await callToHttpPost(request); completeArray.push(...data); render($scope, completeArray, someId); } } catch (e) { errorHandler($scope, e, someId); } } La naturaleza secuencial se hará cumplir mediante las palabras clave async / await .
Si puede agregar una dependencia en RxJS , puede cambiar la función a:
import { from } from 'rxjs'; import { concatMap, scan } from 'rxjs/operators'; function outerFunc ($scope, someId) { from(getRequestInBatches()).pipe( concatMap(callToHttpPost), scan((completeArray, { data }) => completeArray.concat(...data), []) ).subscribe( completeArray => render($scope, completeArray, someId), e => errorHandler($scope, e, someId) ); } que gira en torno al uso de Observable en lugar de Promise . En esta versión, el operador concatMap hace cumplir la naturaleza secuencial, y el operador de scan reduce y emite la matriz completa de resultados mientras la construye.
El error estaba en pasar el valor inicial. En la primera iteración de la función de reducción, Promise.resolve() devuelve undefined . Esto es lo que se pasa como respuesta previousResponse . Pasar Promise.resolve({ data: [] }) como initialValue a la función de reducción resolvió el problema.
arrayOfRequests.reduce((promiseChain, currentRequest) => { console.log(promiseChain); return promiseChain.then((previousResponse) => { completeArray.push.apply(completeArray, previousResponse.data); render($scope, completeArray, someId); return callToHttpPost(currentRequest); }); }, Promise.resolve({ data: [] })) .then(response => { completeArray.push.apply(completeArray, previousResponse.data); render($scope, completeArray, someId); displaySuccessNotification(); }) .catch(e => errorHandler($scope, e, someId));(editado para manejar la respuesta final)