promesses de la chaîne dans la boucle de la carte

Question

Je sais qu'il ya beaucoup de messages sur ce sujet, mais je ne pouvais pas le comprendre. Je suis nouveau à toute cette promesse-chose, mais j'ai un problème spécifique qui doit être résolu. Dans le code ci-dessous, je fais une boucle dans un tableau 'fnFoes' et dans ce fnFoes un autre tableau 'avatar'. Pour chaque élément de l'avatar, un svg-Code provenant d'un indexedDB est chargé et ajouté au format html. Mon problème est le suivant: je veux que cette fonction charge complètement et ajoute tous les svg avant de finir la fonction et de passer à la fonction suivante.

J'ai essayé d'emballer la fonction entière dans un promis mais il a continué toujours avant d'avoir chargé tout le svg. Je suppose que cela a à voir avec l'indexedDB, mais honnêtement, je ne comprends pas.

Après 2 jours de post-lecture et d'essais et d'erreurs, toute aide est très appréciée !! Thx Fritz

$.map(fnFoes, function(i,obj){ 
     console.log(obj); 
     console.log('loadAllAvatars: checking foe: ' + obj); 

     if (!(obj in foes) || fnFoes[obj].avatar != foes[obj].avatar || document.getElementById(obj) === null){ // compare avatar information of both variables. if changed, render new 
      console.log('loadAllAvatars: foe '+ obj +' will be rendered'); 
      foeRenderIds.push(obj); // push foe id in list 
      if (obj in foes) { 
       foes[obj].avatar = fnFoes[obj].avatar; // change avatar items in foes; 
      } 

      var avatar = fnFoes[obj].avatar.split(','); // split avatar string in array 
      console.log(avatar); 
      console.log(fnFoes[obj]); 
      if (document.getElementById('#'+obj)){ // if foe div already exists in avatarDoubles, just delete it 
       $('#'+obj).html(); // delete old avatar from doubles 
      } else { 
       var html ='<div id="foe' + obj + '"></div>'; // if avatar doesn't exist, create it in avatarDoubles 
       $('#avatarDoubles').append(html); 
      } 

      //render avatar 
      if (typeof avatar !== 'undefined' && avatar.length > 1) { 
       $.map(avatar, function(j,key){ 
        console.log(avatar[key]); 
        var name = avatar[key]; 
        db.svgs.get(name).then(function(obj2){ 
         var html = "<div class='" + obj2.category + "' data-name='" + obj2.name + "' data-category='" + obj2.category + "'>" + obj2.svg + "</div>"; 
         $('#foe' + obj).append(html); 
         console.log(obj2.name); 
        }); 

       }); 
      }     
     } else { 
      console.log('loadAllAvatars: foe '+ obj +' already exists'); 
     } 
}); 

Answer 1

Je me bats pour comprendre votre code mais vous voulez probablement quelque chose comme ceci:

function connect() { 
    return new Promise(function(resolve, reject){ 
    var request = indexedDB.open(); 
    request.onsuccess =() => resolve(request.result); 
    }); 
} 

function dothings(db, things) { 
    var promises = []; 
    for(var thing of things) { 
    var promise = dothing(db, thing); 
    promises.push(promise); 
    } 

    return Promise.all(promises); 
} 

function dothing(db, thing) { 
    return new Promise(function(resolve, reject) { 
    var tx = db.transaction('svgs'); 
    var store = tx.objectStore('svgs'); 
    var request = store.get(thing); 
    request.onsuccess =() => resolve(request.result); 
    }); 
} 

function foo() { 
    var things = getthings(); 
    connect().then(function(db) { 
    return dothings(db, things); 
    }); 
}