JavaScript-array .reduce met async/wait

Codefragment weergeven

Antwoord 5

Je kunt je hele map/reduce-iteratorblokken in hun eigen Promise.resolve wikkelen en daarop wachten om te voltooien. Het probleem is echter dat de accumulator niet de resulterende data/objecten bevat die je bij elke iteratie zou verwachten. Vanwege de interne asynchrone/wachten/belofte-keten, zal de accumulator daadwerkelijke beloften zijn die zichzelf waarschijnlijk nog moeten oplossen ondanks het gebruik van een wait-trefwoord voordat u naar de winkel belt (wat ertoe kan leiden dat u denkt dat de iteratie niet echt keer terug totdat die oproep is voltooid en de accumulator is bijgewerkt.

Hoewel dit niet de meest elegante oplossing is, is een optie die je hebt om je dataobjectvariabele buiten het bereik te verplaatsen en het toe te wijzen als een letzodat de juiste binding en mutatie kan optreden. Werk dit gegevensobject vervolgens bij vanuit uw iterator als de async/wait/Promise-aanroepen worden opgelost.

/* allow the result object to be initialized outside of scope 
   rather than trying to spread results into your accumulator on iterations, 
   else your results will not be maintained as expected within the 
   internal async/await/Promise chain.
*/    
let data = {}; 
await Promise.resolve(bodies.reduce(async(accum, current, index) => {
  const methodName = methods[index]
  const method = this[methodName];
  if (methodName == 'foo') {
    // note: this extra Promise.resolve may not be entirely necessary
    const cover = await Promise.resolve(this.store(current.cover, id));
    current.cover = cover;
    console.log(current);
    data = {
      ...data,
      ...current,
    };
    return data;
  }
  data = {
    ...data,
    ...method(current.data)
  };
  return data;
}, {});
console.log(data);

Antwoord 6

Het huidige geaccepteerde antwoord adviseert om Promise.all()te gebruiken in plaats van een asyncreduce. Dit heeft echter niet hetzelfde gedrag als een asyncreduceen is alleen relevant voor het geval dat u wilt dat een uitzondering alle iteraties onmiddellijk stopt, wat niet altijd het geval is .

Bovendien wordt in de opmerkingen van dat antwoord gesuggereerd dat u altijd op de accumulator moet wachten als de eerste verklaring in de verkleiner, omdat u anders het risico loopt onverwerkte afwijzingen van beloften te riskeren. De poster zegt ook dat dit was waar de OP om vroeg, wat niet het geval is. In plaats daarvan wil hij gewoon weten wanneer alles klaar is. Om te weten dat je inderdaad await accmoet doen, maar dit kan op elk punt in het verloop zijn.

const reducer = async(acc, key) => {
  const response = await api(item);
  return {
    ...await acc, // <-- this would work just as well for OP
    [key]: reponse,
  }
}
const result = await ['a', 'b', 'c', 'd'].reduce(reducer, {});
console.log(result); // <-- Will be the final result

Hoe veilig gebruik te maken van asyncreduce

Dat gezegd hebbende, het gebruik van een verloopstuk op deze manier betekent wel dat je moet garanderen dat het niet weggooit, anders krijg je “onverwerkte afwijzingen van beloften”. Het is perfect mogelijk om dit te garanderen door een try-catchte gebruiken, waarbij het catch-blok de accumulator retourneert (optioneel met een record voor de mislukte API-aanroep).

const reducer = async (acc, key) => {
    try {
        data = await doSlowTask(key);
        return {...await acc, [key]: data};
    } catch (error) {
        return {...await acc, [key]: {error}};
    };
}
const result = await ['a', 'b', 'c','d'].reduce(reducer, {});

Verschil met Promise.allSettled
Je kunt het gedrag van een asyncreduce(met foutopsporing) benaderen door Promise.allSettledte gebruiken. Dit is echter onhandig om te gebruiken: je moet erna nog een synchrone reductie toevoegen als je wilt reduceren tot een object.

De theoretische tijdscomplexiteit is ook hoger voor Promise.allSettled+ reguliere reduce, hoewel er waarschijnlijk maar weinig gebruiksgevallen zijn waarin dit een verschil zal maken. asyncreducekan beginnen op te stapelen vanaf het moment dat het eerste item is gedaan, terwijl een reducena Promise.allSettledis geblokkeerd totdat alle beloften zijn vervuld. Dit kan een verschil maken bij het doorlopen van een zeer groot aantal elementen.

const responseTime = 200; //ms
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
const api = async (key) => {
    console.log(`Calling API for ${ key }`);
    // Boz is a slow endpoint.
    await sleep(key === 'boz' ? 800 : responseTime);
    console.log(`Got response for ${ key }`);
    if (key === 'bar') throw new Error(`It doesn't work for ${ key }`);
    return {
        [key]: `API says ${ key }`,
    };
};
const keys = ['foo', 'bar', 'baz', 'buz', 'boz'];
const reducer = async (acc, key) => {
    let data;
    try {
        const response = await api(key);
        data = {
            apiData: response
        };
    } catch (e) {
        data = {
            error: e.message
        };
    }
    // OP doesn't care how this works, he only wants to know when the whole thing is ready.
    const previous = await acc;
    console.log(`Got previous for ${ key }`);
    return {
        ...previous,
        [key]: {
            ...data
        },
    };
};
(async () => {
    const start = performance.now();
    const result = await keys.reduce(reducer, {});
    console.log(`After ${ performance.now() - start }ms`, result); // <-- OP wants to execute things when it's ready.
})();

const promise = require('bluebird');
promise.reduce([1,2,3], (agg, x) => Promise.resolve(agg+x),0).then(console.log);
// Expected to product sum 6

export const addMultiTextData = async(data) => {
  const textData = await data.reduce(async(a, {
    currentObject,
    selectedValue
  }) => {
    const {
      error,
      errorMessage
    } = await validate(selectedValue, currentObject);
    return {
      ...await a,
      [currentObject.id]: {
        text: selectedValue,
        error,
        errorMessage
      }
    };
  }, {});
};

async function asyncReduce(arr, fn, initialValue) {
  let temp = initialValue;
  for (let idx = 0; idx < arr.length; idx += 1) {
    const cur = arr[idx];
    temp = await fn(temp, cur, idx);
  }
  return temp;
}