आंतरिक वादे को हल करने से पहले वादा संकल्प

Question

मेरे पास एक वादा है और मैं इसे केवल तब हल करना चाहता हूं जब आंतरिक वादे का समाधान हो। "लोड" कॉलबैक में "समाधान" फ़ंक्शन तक पहुंचने से पहले यह ठीक हो जाता है।

मुझे क्या याद आ रही है? मैं संकल्प का उपयोग करने के तरीके के बारे में उलझन में हूं और आप किसी अन्य वादे के भीतर वादे का उपयोग कैसे कर सकते हैं।

मुझे वेब पर मदद करने वाली कुछ भी नहीं मिली।

निम्नलिखित उदाहरण में मैं मूल रूप से फ़ाइलों का एक समूह लोड करता हूं, प्रत्येक फ़ाइल के लिए मुझे एक ब्लॉब मिलता है और मैं इस ब्लॉब को फ़ाइल रीडर में पास करना चाहता हूं।

एक बार सभी फाइलें फ़ाइल रीडर को पास कर दी गई हैं, तो मैं वादे श्रृंखला में अगले कार्य में जाना चाहता हूं।

अभी यह कहने के संकल्प के इंतजार किए बिना श्रृंखला में अगले कार्य में जाता है।

var list = []; 
var urls = this.files; 

urls.forEach(function(url, i) { 
    list.push(
     fetch(url).then(function(response) { 
      response.blob().then(function(buffer) { 

       var promise = new Promise(
        function(resolve) { 

         var myReader = new FileReader(); 
         myReader.addEventListener('loadend', function(e) { 
          // some time consuming operations 
          ... 
          window.console.log('yo'); 
          resolve('yo'); 
         }); 

         //start the reading process. 
         myReader.readAsArrayBuffer(buffer); 
        }); 

       promise.then(function() { 
        window.console.log('smooth'); 
        return 'smooth'; 
       }); 

      }); 
     }) 
    ); 
}); 

... 

// run the promise... 
Promise 
    .all(list) 
    .then(function(message){ 
     window.console.log('so what...?'); 
    }) 
    .catch(function(error) { 
     window.console.log(error); 
    }); 

Answer 1

आप then कॉलबैक से नहीं return कुछ भी करते हैं, यह तुल्यकालिक संचालन हो जाती है और परिणाम (undefined) तुरंत साथ परिणाम वादा हल करने चला जाता है।

आप return के लिए हर अतुल्यकालिक समारोह, then कॉलबैक कि आप श्रृंखलित प्राप्त करना चाहते हैं को शामिल करने से एक वादा की जरूरत है।

विशेष रूप से, अपने कोड हो जाना चाहिए

var list = this.files.map(function(url, i) { 
//     ^^^^ easier than [] + forEach + push 
    return fetch(url).then(function(response) { 
     return response.blob().then(function(buffer) { 
      return new Promise(function(resolve) { 
       var myReader = new FileReader(); 
       myReader.addEventListener('loadend', function(e) { 
        … 
        resolve('yo'); 
       }); 
       myReader.readAsArrayBuffer(buffer); 
      }).then(function() { 
       window.console.log('smooth'); 
       return 'smooth'; 
      }); 
     }) 
    }); 
}); 

या और भी बेहतर, flattened:

var list = this.files.map(function(url, i) { 
    return fetch(url).then(function(response) { 
     return response.blob(); 
    }).then(function(buffer) { 
     return new Promise(function(resolve) { 
      var myReader = new FileReader(); 
      myReader.addEventListener('loadend', function(e) { 
       … 
       resolve('yo'); 
      }); 
      myReader.readAsArrayBuffer(buffer); 
     }); 
    }).then(function() { 
     window.console.log('smooth'); 
     return 'smooth'; 
    }); 
});