如何在对象中使用Promise？解决调用及结果读取报错问题

错误原因 #

代码执行时，app.tabs初始值为null，此时直接调用app.tabs.then()会报错——因为null没有then方法。而且即便后续点击事件给app.tabs赋值了Promise，初始的then调用已经执行完毕，不会再触发。

修复方案 #

把then的调用放到点击事件回调内，确保只有当app.tabs被赋值为Promise后，才监听它的状态：

const app = {
   tabs : null,
   ...
};

document.getElementById('myid').addEventListener('click', function() {
   app.tabs = foo();  // returns a Promise
   // 赋值后再监听Promise状态
   app.tabs.then(function() {
      bar();
   });
});

如果需要提前预留then调用的逻辑，也可以初始将app.tabs设为一个已resolved的空Promise，避免初始调用报错：

const app = {
   tabs : Promise.resolve([]), // 初始设为已resolved的Promise
   ...
};

document.getElementById('myid').addEventListener('click', function() {
   app.tabs = foo();  // returns a Promise
   app.tabs.then(function() {
      bar();
   });
});

// 此时初始调用then不会报错，仅当后续foo返回的Promise resolved时才会触发bar
app.tabs.then(function() {
   bar();
});

错误原因 #

app.tabs存储的是Promise对象，不是Promise resolved后的结果值。哪怕Promise已经fulfilled，app.tabs[0]依然是undefined，自然无法读取id属性。

解决办法 #

方案1：在then回调中直接使用结果

把Promise的resolved结果作为参数传入bar，在函数内直接访问：

document.getElementById('myid').addEventListener('click', function() {
   app.tabs = foo();  // returns a Promise
   app.tabs.then(function(tabsResult) {
      // tabsResult是Promise返回的单元素数组
      bar(tabsResult);
   });
});

// 修改bar函数，接收结果参数
function bar(tabsResult) {
   console.log(tabsResult[0].id);
}

方案2：将结果存储到单独属性中

在app里新增一个属性专门存储Promise的结果，后续在bar中访问该属性：

const app = {
   tabs : null,
   tabsData: null, // 用于存储Promise的resolved结果
   ...
};

document.getElementById('myid').addEventListener('click', function() {
   app.tabs = foo();  // returns a Promise
   app.tabs.then(function(tabsResult) {
      app.tabsData = tabsResult;
      bar();
   });
});

function bar() {
   console.log(app.tabsData[0].id);
}

内容的提问来源于stack exchange，提问作者QF0