Question

我正在使用Grafana插件API，并且试图创建一个返回对象常量var literals的函数，该对象常量将包含我从服务器获取的新数据。此函数return literals;的结果将作为参数进入稍后的另一个Grafana API函数。我对诺言如何运作感到非常困惑，我真的不知道如何解决这个问题。

现在在这段代码中，我遇到了控制台错误的问题

TypeError：data.dbs未定义”

第data.dbs.forEach(element => {行

我认为在调用.then()函数之后，该数据应该已经返回，但仍然无法解析？

我还想知道如何精确地创建整个getDropdown()函数，以便它能够向前发送已解析的数据？

export function getDropdown() {
  var literals = {
    path: 'displayMode',
    name: 'Cell display mode',
    description: 'Color text, background, show as gauge, etc',
    settings: {
      options: [{
        value: 1,
        label: 'Placeholder'
      }],
    },
  };

  var data = {
    dbs: [{
      id: 1,
      database: 'placeholder',
    }, ],
  };


  fetch('/api/datasources')
    .then(function(res) {
      return res.json();
    })
    .then(json => {

      data = json;
      var counter = 0;
      data.dbs.forEach(element => {
        literals.settings.options[counter].label = element.database;
        literals.settings.options[counter].value = element.id;
        counter++;
      });


    });

  return literals;
}

我可以用这段代码解决问题

fetch('/api/datasources')
    .then(data => {
      return data.json();
    })
    .then(data => {
      data.forEach((element: { database: string; id: number }) => {
        literals.settings.options[counter].label = element.database;
        literals.settings.options[counter].value = element.id;
        counter++;
      });
    });

我认为data.dbs出了点问题，但是我仍然不确定是什么。

Answer 1

要使用then（）函数，请尝试使用async / await，您可以在其中异步执行函数，也可以等到获得承诺。

在上面的代码中，您可以编写一个异步函数并等待直到得到来自 获取（'/ api / datasources'）

// Do
async function getData() {
  var data = await fetch('/api/datasources')
  var jsonData = JSON.parse(data)
  jsonData.dbs.forEach(element => {
    literals.settings.options[counter].label = element.database;
    literals.settings.options[counter].value = element.id;
    counter++;
  });
}

// Instead of
fetch('/api/datasources')
    .then(function(res) {
      return res.json();
    })
    .then(json => {

      data = json;
      var counter = 0;
      data.dbs.forEach(element => {
        literals.settings.options[counter].label = element.database;
        literals.settings.options[counter].value = element.id;
        counter++;
      });


    });

提取数据并将其显示为下拉菜单

1 个答案: