在我创建的示例中使用蓝鸟承诺不起作用

Question

我一直在学习并试图理解异步javascript。在大量阅读和使用 bluebird 库的建议之后，因为我使用的是 IE11，我在我创建的一个简单示例中尝试了它，但它没有按预期工作。我在每个函数中添加了一个settimeout来模拟异步。目标是填充数组，这样我就可以 console.log() 数组值，但无济于事。在我的 promise.all 中，我调用了 createNavigation()，这表明我的所有数组都已填充，但事实并非如此。此外，正在为 promise.all.
中的结果返回数字我做错了什么或误解了什么？为什么我的数组作为空白记录到控制台？

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

getNavData();
getSubNavData();
getMegaMenuData();
getCategoryMenuData();

var promises = [
  getNavData(),getSubNavData(),getMegaMenuData(),getCategoryMenuData()
]

Promise.all(promises)
 .then(function(results){
 console.log(results)
 createNavigation()
})
function getNavData(){
   return setTimeout(function(){ 
    cacheNavData[0] = "Soup";
    cacheNavData[1] = "Sandwich";
    cacheNavData[2] = "Rice";  
   }, 3000);
 }

 function getSubNavData(){
   return setTimeout(function(){ 
    cacheSubNavData[0] = "Apple";
    cacheSubNavData[1] = "Beans";
    cacheSubNavData[2] = "Carrot";    
  }, 3000);

 }

 function getMegaMenuData(){
    return setTimeout(function(){ 
    cacheMegaMenuData[0] = "Donkey";
    cacheMegaMenuData[1] = "Eagle";
    cacheMegaMenuData[2] = "Frog";
 }, 3000);
}

function getCategoryMenuData(){
   return setTimeout(function(){ 
    cacheCategoryMenuData[0] = "Grapes";
    cacheCategoryMenuData[1] = "Hand";
    cacheCategoryMenuData[2] = "Igloo";    
   }, 3000);
 }

 function createNavigation(){
   console.log("All arrays have been populated.  Let's build the navigation.")

 }

 console.log(cacheNavData);
 console.log(cacheSubNavData);
 console.log(cacheMegaMenuData);
 console.log(cacheCategoryMenuData);

codepen

Answer 1

那是因为在您的函数中，您是 return 计时器的 ID ，而不是 return 一个在计时器用完。因此，执行几乎是立即的。您想要的是确保您在方法中 returning 承诺而不是计时器 ID。这是一个例子：

function getNavData(){
   return new Promise(function(resolve) {
     setTimeout(function(){ 
      cacheNavData[0] = "Soup";
      cacheNavData[1] = "Sandwich";
      cacheNavData[2] = "Rice";

      resolve();
     }, 3000);
   });
 }

如果您想要 return 数据的承诺，则不要使用 resolve()，而是将要解析的数据作为第一个参数传递，例如resolve(cacheNavData).

您也不应在文件末尾进行控制台日志记录，因为这些数组将为空。如果你想访问它们，你应该从 results 读取它们，如果你正在解析有效负载。您始终可以使用 ES6 array spread 来解压结果：

Promise.all(promises)
 .then(function(results){
  console.log(results);
  const [navData, subNavData, megaMenuData, categoryMenuData] = results;
  console.log(navData, subNavData, megaMenuData, categoryMenuData);
  createNavigation();
});

这也意味着您不需要为所有数据声明全局数组：您的各个函数有责任将填充的数组传回 Promise.all.

查看概念验证示例：

var promises = [
  getNavData(),getSubNavData(),getMegaMenuData(),getCategoryMenuData()
]

Promise.all(promises)
 .then(function(results){
 console.log(results);
 const [navData, subNavData, megaMenuData, categoryMenuData] = results;
 console.log(navData, subNavData, megaMenuData, categoryMenuData);
 createNavigation();
})
function getNavData(){
   return new Promise(function(resolve) {
     setTimeout(function(){ 
      var cacheNavData = [];
      cacheNavData[0] = "Soup";
      cacheNavData[1] = "Sandwich";
      cacheNavData[2] = "Rice";
      
      resolve(cacheNavData);
     }, 3000);
   });
 }

 function getSubNavData(){
   return new Promise(function(resolve) {
     setTimeout(function(){
      var cacheSubNavData = [];
      cacheSubNavData[0] = "Apple";
      cacheSubNavData[1] = "Beans";
      cacheSubNavData[2] = "Carrot";
      
      resolve(cacheSubNavData);
    }, 3000);
   });
 }

 function getMegaMenuData(){
  return new Promise(function(resolve) {
    setTimeout(function(){ 
      var cacheMegaMenuData = [];
      cacheMegaMenuData[0] = "Donkey";
      cacheMegaMenuData[1] = "Eagle";
      cacheMegaMenuData[2] = "Frog";

      resolve(cacheMegaMenuData);
    }, 3000);
  });
}

function getCategoryMenuData(){
   return new Promise(function(resolve) {
     setTimeout(function(){ 
      var cacheCategoryMenuData = [];
      cacheCategoryMenuData[0] = "Grapes";
      cacheCategoryMenuData[1] = "Hand";
      cacheCategoryMenuData[2] = "Igloo"; 
      
      resolve(cacheCategoryMenuData);
     }, 3000);
    });
 }

 function createNavigation(){
   console.log("All arrays have been populated.  Let's build the navigation.")

 }

在我创建的示例中使用蓝鸟承诺不起作用

Using bluebird promise not working in my created example

javascript

asynchronous

bluebird