Отложенных/Promise расслоения плотного Механизм, при загрузке множественного firebase хранения

Question

я застрял с загрузкой изображений в firebase базов данных асинхронного Механизм, в моем проекте, вот мои проблематичный:

У меня есть форма, где пользователь положить некоторую информацию, то пользователю также необходимо предоставить 4 фотографии для завершения процесса загрузки.

я использовать firebase БД При & firebase хранения справиться с этим, вот поток:

• пользователь заполнить form1 form2 & form3 с текстом информации на основе
• пользователь выбрал img1 img2 img3 img4 изображение со своего компьютера
• user clic отправить все 4 Загрузка изображения в firebase и дать мне 4 скачать url
• i append все собранные ранее данные + 4 download ur l в словаре и отправить его в базу данных firebase

поэтому моя сделка заключается в создании и отправке словаря только в том случае, если и если установлен 4-й URL-адрес, я слышал об отложенной/обещающей концепции, но я вижу много запроса Ajax, и никто с подобным вопросом, вот что у меня есть на текущий момент

$("#submit-bag").click(function() { 

    var uploadDfdimg1 = function() { 
     var deferred = new $.Deferred(); 
     var uploadTask = storageRef.child('images/' + $img1.name).put($img1); 
     uploadTask.on('state_changed', function(snapshot){ 
     }, function(error) { 
     deferred.reject(error); 
     }, function() { 
     var downloadURL = uploadTask.snapshot.downloadURL; 
     console.log(downloadURL); 
     url1 = downloadURL; 
     deferred.resolve(downloadURL); 

     return deferred.promise(); 
     }); 
    } 
    var uploadDfdimg2 = function() { 
     var deferred = new $.Deferred(); 
     var uploadTask = storageRef.child('images/' + $img2.name).put($img2); 
     uploadTask.on('state_changed', function(snapshot){ 
     }, function(error) { 
     deferred.reject(error); 
     }, function() { 
     var downloadURL = uploadTask.snapshot.downloadURL; 
     console.log(downloadURL); 
     url2 = downloadURL; 
     deferred.resolve(downloadURL); 

     return deferred.promise(); 
     }); 
    } 
    $.when(uploadDfdimg1,uploadDfdimg2).then(
     function(){console.log('double trouble success')}, 
     function(){console.log(url1 + " deferred")}, 
     function(){console.log(url2 + " deferred")}); 


    var brand = $("#select1 option:selected").text() 
    var mail = document.getElementById('form1').value 
    var postal_code = document.getElementById('form2').value 
    var comment = document.getElementById('comment').value 
    //UPLOAD IMG 

    //uploadImg(img1,url1); 
    //uploadImg(img2,url2); 
    uploadImg(img3,url3); 
    uploadImg(img4,url4); 

    //console.log(url1); 
    //console.log(url2); 
    console.log(url3); 
    console.log(url4); 
    //PHOTO LINK VAR 
    var postData = { 
     marque: brand, 
     email: mail, 
     code_postal: postal_code, 
     commentaire: comment, 
     //PHOTO LINK 
     validation: 0 
    }; 
    var newPostKey = firebase.database().ref().child('submission').push().key; 
    var updates = {}; 
    updates['/submission/' + newPostKey] = postData; 
    firebase.database().ref().update(updates) 

, как вы можете видеть здесь, img3 & img4 загрузить себя, используя старый нон fonctionnal образом (downloadUrl приходят после все словарной PostData отправляется)

для img1 & img2 Я попытался использовать Deferred, чтобы увидеть, могу ли я получить 2 url в то же время, когда $ .when.(), Затем запускается, как правило, после обещания успеха двух функций uploadDfdimg

результат: i мгновенно получить «Double Trouble» LOG сообщение с пустой переменной URL-адрес, и, как правило, после второго, два URL, возвращаемый firebase для img3 и img

return log of the above code

, как я могу быть в состоянии асинхронно отправить 4 изображение в firebase, получить url, и в конце этого процесса поместите url в мой словарь, чтобы отправить его в мою базу данных?

Answer 1

Возникает вопрос о следующем подходе.

Сначала функция полезности, которая обещает процесс загрузки и поставляет заверенную с обещанием downloadURL.

function uploadImg(img) { 
    return $.Deferred(function(dfrd) { 
     var uploadTask = storageRef.child('images/' + img.name).put(img); 
     uploadTask.on(
      'state_changed', 
      function(snapshot) {}, 
      function(error) { dfrd.reject(error); }, 
      function() { dfrd.resolve(uploadTask.snapshot.downloadURL); } 
     ); 
    }).promise(); 
} 

Теперь, что утилита может быть использована для создания 4-х обещаний, которые затем могут быть объединены с $.when():

$("#submit-bag").click(function() { 
    var p1 = uploadImg(img1); 
    var p2 = uploadImg(img2); 
    var p3 = uploadImg(img3); 
    var p4 = uploadImg(img4); 
    $.when(p1, p2, p3, p4).then(function(downloadUrl1, downloadUrl2, downloadUrl3, downloadUrl4) { 
     // Whatever you want to do with downloadUrl1, downloadUrl3, downloadUrl3, downloadUrl4, ... 
     // ... do it somewhere in this function. 
     var updates = {}; 
     updates['/submission/' + firebase.database().ref().child('submission').push().key] = { 
      marque: $("#select1 option:selected").text(), 
      email: $('#form1').val(), 
      code_postal: $('#form2').val(), 
      commentaire: $('#comment').val(), 
      validation: 0 
     }; 
     firebase.database().ref().update(updates); 
    }); 
} 

Более лаконично, вы бы, вероятно, написать:

$("#submit-bag").click(function() { 
    var promises = [img1, img2, img3, img4].map(uploadImg); 
    $.when.apply(null, promises).then(function(downloadUrl1, downloadUrl3, downloadUrl3, downloadUrl4) { 
     // Whatever you want to do with downloadUrl1, downloadUrl3, downloadUrl3, downloadUrl4, ... 
     // ... do it somewhere in this function. 
     // etc, as above 
    }); 
}