时间戳

首页 > 解决方案 > 解析数组或承诺并获得结果

javascript - 解析数组或承诺并获得结果

问题描述

我正在尝试映射和格式化数据以将其呈现到表格中。我有一系列承诺，我试图用 Promise.all() 来解决。但它似乎没有返回承诺的结果。

我的代码如下：

const formatData = (data) => {
  let dataCopy = data;

  if (dataCopy.items && _.has(dataCopy.items[0], 'tenantId')) {
      dataCopy.items = setTenants(dataCopy)
  }

  // format parameters or table render
  // other formatting for the table
  return dataCopy.items.map(item => ({
      ...item,
      created: new Date(item.created).toDateString(),
      updated: new Date(item.updated).toDateString(),
      ...(item.active && { active: item.active.toString() })
  }));
};

const setTenants = (data) => {
  const promises = data.items.map(item => {
      return getTenant(item)
  })
  return Promise.all(promises).then(res => { return res })
}

const getTenant = (row) => {
  return tenantService.getTenantById(row.tenantId).then(res => {
      // set name as the tenant param for the table
      row.tenant = res.name
      return row
  });
}

我的数据复制变量只返回：

[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(10)

其中结果是“setTenants”函数的正确结果。

标签： javascriptreactjsecmascript-6promisees6-promise

解决方案

我有一系列我试图用Promise.all().

Promise.all不解决承诺（或者我认为你的意思是在这种情况下解决¹）。它允许您观察承诺的结算结果。这不会让他们安定下来。

您的setTenants函数返回一个承诺。要使用其履行价值，您必须使用.then或await（在async函数中）。请记住，当setTenants返回它的承诺时，已经开始的操作可能还没有完成。

所以

setTenants(/*...*/)
.then(results => {
    // use results...
})
.catch(error => {
    // handle/report error
});

或者，在一个async函数中：

const results = await setTenants(/*...*/);

（也许用try/catch来处理拒绝，尽管您通常希望让它传播到调用者并在那里处理它。）

旁注：then此代码中的回调毫无意义：

return Promise.all(promises).then(res => { return res })

它应该只是：

return Promise.all(promises);

¹ 一些承诺术语：

  • 履行- 将承诺状态从待处理更改为具有特定履行值的履行
  • 拒绝- 将承诺状态从待处理更改为拒绝，并具有特定的拒绝原因
  • 解决- 直接（通过履行或拒绝）或间接（通过使其结果取决于另一个承诺的结果）确定承诺的最终结果

重要的是要认识到，如果一个已解决的 Promise 已解决为另一个 Promise 并且另一个 Promise处于未决状态，它仍将处于未决状态。

这是一个例子：

const p1 = new Promise(resolve => {
    setTimeout(resolve, 800, 42);
});

// This could also be written: `const p2 = Promise.resolve(p1);`
const p2 = new Promise(resolve => {
    resolve(p1);
});

// At this point, both `p1` and `p2` are *pending*; `p2` is *resolved to*
// `p1`, but neither `p1` nor `p2` is *settled* yet

p2
.then(value => {
    // At this point, `p2` is *fulfilled* (one of the two kinds of *settled*)
    console.log(value);
})
.catch(error => {
    // At this point, `p2` is *rejected* (one of the two kinds of *settled*)
    console.error(error);
});

推荐阅读