如何在ChartJS工具提示回调函数中使用async-await

时间:2019-01-28 13:17:43

标签: javascript reactjs async-await tooltip chart.js

我想在ChartJS工具提示上显示计算的数据,该数据来自基于API调用的承诺。 问题是,我可以在console.log()中看到所需的数据,但是它没有出现在工具提示上并给出错误,看来承诺没有解决。

我期望在tooltipData数组中有hg链接以及其他数据。 其余的简单字符串都可以正常工作,但是当我尝试显示hg链接时,它显示的是[object promise]而不是我在console.log()中得到的结果。

看起来像回调在承诺被解决之前正在返回数组。

You can see the actual tooltip result here

tooltips: {
      callbacks: {
        footer: async (tooltipItems, data) => {
          const tooltipData = [];
          let jobLink = '';
          let hgLink = '';
          let dataset = 'n/a';
          let currentData = 'n/a';
          if (tooltipItems[0].index > 0) {

            // generate hg link
            const currPushId = tooltipDataSet.push_id;
            const prevPushID = series.data[tooltipItems[0].index - 1].push_id;

            const currPushiIdLink = getPushIdLink(currPushId);
            const prevPushiIdLink = getPushIdLink(prevPushID);

            const [currPushData, prevPushData] = await Promise.all([
              fetchPushidData(currPushiIdLink), fetchPushidData(prevPushiIdLink),
            ]);

            const currRevision = currPushData.revision;
            const prevRevision = prevPushData.revision;

            console.log({ currRevision, prevRevision });
// it is working well here and giving the right data

            hgLink = `thislink.com/pushloghtml?fromchange=${prevRevision}&tochange=${currRevision}`;
          }
// I have to display this link in the tooltip 

          hgLink = `hg (${hgLink})`;
          tooltipData.push(indicator, `Δ ${delta} (${deltaPercentage}%)`, jobLink, hgLink); // some other data with hg link
          return tooltipData;
        },
      },
    },


0 个答案:

没有答案