โหนด JS Promise.all และ forEach

ฉันมีโครงสร้างเหมือนอาร์เรย์ที่เปิดเผยเมธอด async เมธอด async เรียกใช้โครงสร้างอาร์เรย์ที่ส่งคืนซึ่งจะแสดงวิธีการ async มากขึ้น ฉันกำลังสร้างออบเจ็กต์ JSON อื่นเพื่อเก็บค่าที่ได้รับจากโครงสร้างนี้ดังนั้นฉันจึงต้องระมัดระวังในการติดตามการอ้างอิงในการเรียกกลับ

ฉันได้เขียนโค้ดวิธีแก้ปัญหาแบบเดรัจฉานแล้ว แต่ฉันต้องการเรียนรู้วิธีแก้ปัญหาที่เป็นสำนวนหรือสะอาดกว่านี้

1. รูปแบบควรทำซ้ำได้สำหรับ n ระดับของการทำรัง
2. ฉันจำเป็นต้องใช้คำมั่นสัญญาทั้งหมดหรือเทคนิคบางอย่างที่คล้ายกันเพื่อพิจารณาว่าเมื่อใดควรแก้ไขรูทีนการปิดล้อม
3. ไม่ใช่ทุกองค์ประกอบที่จำเป็นต้องเกี่ยวข้องกับการโทรแบบ async ดังนั้นในสัญญาที่ซ้อนกันทั้งหมดฉันไม่สามารถกำหนดองค์ประกอบอาร์เรย์ JSON ของฉันตามดัชนีได้ อย่างไรก็ตามฉันจำเป็นต้องใช้บางอย่างเช่นคำสัญญาทั้งหมดในที่ซ้อนกัน forEach เพื่อให้แน่ใจว่ามีการกำหนดคุณสมบัติทั้งหมดก่อนที่จะแก้ไขรูทีนการปิดล้อม
4. ฉันใช้ bluebird สัญญา lib แต่นี่ไม่ใช่ข้อกำหนด

นี่คือรหัสบางส่วน -

var jsonItems = [];

items.forEach(function(item){

  var jsonItem = {};
  jsonItem.name = item.name;
  item.getThings().then(function(things){
  // or Promise.all(allItemGetThingCalls, function(things){

    things.forEach(function(thing, index){

      jsonItems[index].thingName = thing.name;
      if(thing.type === 'file'){

        thing.getFile().then(function(file){ //or promise.all?

          jsonItems[index].filesize = file.getSize();

ค่อนข้างตรงไปตรงมากับกฎง่ายๆ:

• เมื่อใดก็ตามที่คุณสร้างสัญญาใน a thenให้ส่งคืน - คำสัญญาใด ๆ ที่คุณไม่กลับมาจะไม่ถูกรออยู่ข้างนอก
• เมื่อใดก็ตามที่คุณสร้างหลายสัญญา.allพวกเขา - วิธีการที่จะรอให้สัญญาทั้งหมดและความผิดพลาดจากการใด ๆ ของพวกเขาไม่ได้รับการเงียบ
• เมื่อใดก็ตามที่คุณทำรังthenคุณสามารถกลับมาตรงกลางได้ -thenโซ่มักจะลึกมากที่สุด 1 ระดับ
• เมื่อใดก็ตามที่คุณดำเนินการ IO ควรเป็นไปตามคำมั่นสัญญา - ไม่ว่าจะเป็นสัญญาหรือควรใช้สัญญาเพื่อส่งสัญญาณว่าเสร็จสิ้น

และเคล็ดลับ:

• การทำแผนที่ทำได้ดี.mapกว่าด้วยfor/push - หากคุณกำลังแมปค่าด้วยฟังก์ชันmapช่วยให้คุณสามารถแสดงแนวคิดของการใช้การกระทำทีละรายการและรวบรวมผลลัพธ์ได้อย่างกระชับ
• การทำงานพร้อมกันนั้นดีกว่าการดำเนินการตามลำดับหากเป็นอิสระ - ควรดำเนินการพร้อมกันและรอให้Promise.allดีกว่าที่จะดำเนินการทีละอย่าง - แต่ละอย่างรอก่อนหน้าถัดไป

เอาล่ะมาเริ่มกันเลย:

var items = [1, 2, 3, 4, 5];
var fn = function asyncMultiplyBy2(v){ // sample async action
    return new Promise(resolve => setTimeout(() => resolve(v * 2), 100));
};
// map over forEach since it returns

var actions = items.map(fn); // run the function over all items

// we now have a promises array and we want to wait for it

var results = Promise.all(actions); // pass array of promises

results.then(data => // or just .then(console.log)
    console.log(data) // [2, 4, 6, 8, 10]
);

// we can nest this of course, as I said, `then` chains:

var res2 = Promise.all([1, 2, 3, 4, 5].map(fn)).then(
    data => Promise.all(data.map(fn))
).then(function(data){
    // the next `then` is executed after the promise has returned from the previous
    // `then` fulfilled, in this case it's an aggregate promise because of 
    // the `.all` 
    return Promise.all(data.map(fn));
}).then(function(data){
    // just for good measure
    return Promise.all(data.map(fn));
});

// now to get the results:

res2.then(function(data){
    console.log(data); // [16, 32, 48, 64, 80]
});

นี่คือตัวอย่างง่ายๆโดยใช้การลด มันทำงานตามลำดับรักษาลำดับการแทรกและไม่ต้องใช้ Bluebird

/**
 * 
 * @param items An array of items.
 * @param fn A function that accepts an item from the array and returns a promise.
 * @returns {Promise}
 */
function forEachPromise(items, fn) {
    return items.reduce(function (promise, item) {
        return promise.then(function () {
            return fn(item);
        });
    }, Promise.resolve());
}

และใช้มันดังนี้:

var items = ['a', 'b', 'c'];

function logItem(item) {
    return new Promise((resolve, reject) => {
        process.nextTick(() => {
            console.log(item);
            resolve();
        })
    });
}

forEachPromise(items, logItem).then(() => {
    console.log('done');
});

เราพบว่ามีประโยชน์ในการส่งบริบททางเลือกเข้าสู่วง บริบทเป็นทางเลือกและแชร์โดยการทำซ้ำทั้งหมด

function forEachPromise(items, fn, context) {
    return items.reduce(function (promise, item) {
        return promise.then(function () {
            return fn(item, context);
        });
    }, Promise.resolve());
}

ฟังก์ชันสัญญาของคุณจะมีลักษณะดังนี้:

function logItem(item, context) {
    return new Promise((resolve, reject) => {
        process.nextTick(() => {
            console.log(item);
            context.itemCount++;
            resolve();
        })
    });
}

ฉันเคยผ่านสถานการณ์เดียวกันมาแล้ว ฉันแก้ไขโดยใช้สอง Promise All ()

ฉันคิดว่าเป็นทางออกที่ดีจริงๆดังนั้นฉันจึงเผยแพร่บน npm: https://www.npmjs.com/package/promise-foreach

ฉันคิดว่ารหัสของคุณจะเป็นแบบนี้

var promiseForeach = require('promise-foreach')
var jsonItems = [];
promiseForeach.each(jsonItems,
    [function (jsonItems){
        return new Promise(function(resolve, reject){
            if(jsonItems.type === 'file'){
                jsonItems.getFile().then(function(file){ //or promise.all?
                    resolve(file.getSize())
                })
            }
        })
    }],
    function (result, current) {
        return {
            type: current.type,
            size: jsonItems.result[0]
        }
    },
    function (err, newList) {
        if (err) {
            console.error(err)
            return;
        }
        console.log('new jsonItems : ', newList)
    })

เพียงเพิ่มลงในโซลูชันที่นำเสนอในกรณีของฉันฉันต้องการดึงข้อมูลหลายรายการจาก Firebase สำหรับรายการผลิตภัณฑ์ นี่คือวิธีที่ฉันทำ:

useEffect(() => {
  const fn = p => firebase.firestore().doc(`products/${p.id}`).get();
  const actions = data.occasion.products.map(fn);
  const results = Promise.all(actions);
  results.then(data => {
    const newProducts = [];
    data.forEach(p => {
      newProducts.push({ id: p.id, ...p.data() });
    });
    setProducts(newProducts);
  });
}, [data]);