Javascript componentDidMount中的许多API调用

我的API每月返回销售数据，我试图在react的apex图表中显示过去两年的数据。我尝试每月多次调用API，并将数据格式化为apex可以显示的格式

componentDidMount() {
        var data = [];
        var categories = [];
        var maxYear = moment(new Date()).format("YYYY");
        for (var y = 2018; y <= maxYear; y++) {
            for (var m = 1; m < 13; m++) {
                axios.get(axios.get('http://localhost:8080/sales/lead/' + y + '/' + m))
                    .then(res => {
                        const value = res.data.lead_time;
                        data.push(value);
                        categories.push(m +" "+ y);

                    })
            }
        }
        console.log(data);
        console.log(categories);
        this.setState({
            series: [{
                data: data
            }],
            options: {
                xaxis: {
                    categories: categories
                }
            }
        })
    }

componentDidMount（）{
var数据=[]；
var类别=[]；
var maxYear=时刻（新日期（））.format（“YYYY”）；
风险值y=2018；y{
const value=res.data.lead_时间；
数据推送（值）；
类别。推送（m+“”+y）；
})
}
}
控制台日志（数据）；
控制台日志（类别）；
这是我的国家({
系列：[{
数据：数据
}],
选项：{
xaxis：{
类别：类别
}
}
})
}

---

其中I console.log输出，但不返回任何内容。我假设我需要在每个循环上以某种方式等待get请求的返回值，但是我不确定如何实现这一点。

它是空的，因为

console.log（数据）之前执行code>。然后（…）

子句

我建议你多读一些，因为这些在JS中非常重要

这应该起作用：

使用承诺：

componentDidMount（）{
var数据=[]；
var承诺=[]；
var类别=[]；
var maxYear=时刻（新日期（））.format（“YYYY”）；
风险值y=2018；y{
results.forEach（res=>{
const value=res.data.lead_时间；
数据推送（值）；
类别。推送（m+“”+y）；
控制台日志（数据）；
控制台日志（类别）；
});
})
这是我的国家({
系列：[{
数据：数据
}],
选项：{
xaxis：{
类别：类别
}
}
})
}

使用异步/等待： 异步组件didmount（）{ var数据=[]； var类别=[]； var maxYear=时刻（新日期（））.format（“YYYY”）；

---

对于（var y=2018；y它是空的，因为

console.log（data）；

在

之前执行。然后（…）

子句

我建议你多读一些，因为这些在JS中非常重要

这应该起作用：

使用承诺：

componentDidMount（）{
var数据=[]；
var承诺=[]；
var类别=[]；
var maxYear=时刻（新日期（））.format（“YYYY”）；
风险值y=2018；y{
results.forEach（res=>{
const value=res.data.lead_时间；
数据推送（值）；
类别。推送（m+“”+y）；
控制台日志（数据）；
控制台日志（类别）；
});
})
这是我的国家({
系列：[{
数据：数据
}],
选项：{
xaxis：{
类别：类别
}
}
})
}

使用异步/等待： 异步组件didmount（）{ var数据=[]； var类别=[]； var maxYear=时刻（新日期（））.format（“YYYY”）； 风险值y=2018；y

componentDidMount() {
  var data = [];
  var promises = [];
  var categories = [];
  var maxYear = moment(new Date()).format("YYYY");

  for (var y = 2018; y <= maxYear; y++) {
    for (var m = 1; m < 13; m++) {
      promises.push(axios.get'http://localhost:8080/sales/lead/' + y + '/' + m))
    }
  }

  Promise.all(promises)
    .then(results => {
      results.forEach(res => {
        const value = res.data.lead_time;
        data.push(value);
        categories.push(m + " " + y);

        console.log(data);
        console.log(categories);
      });
    })

  this.setState({
    series: [{
      data: data
    }],
    options: {
      xaxis: {
        categories: categories
      }
    }
  })
}

async componentDidMount() {
  var data = [];
  var categories = [];
  var maxYear = moment(new Date()).format("YYYY");
  for (var y = 2018; y <= maxYear; y++) {
    for (var m = 1; m < 13; m++) {

      var res = await axios.get('http://localhost:8080/sales/lead/' + y + '/' + m)
      const value = res.data.lead_time;
      data.push(value);
      categories.push(m + " " + y);

      console.log(data);
      console.log(categories);

    }
  }

  this.setState({
    series: [{
      data: data
    }],
    options: {
      xaxis: {
        categories: categories
      }
    }
  })
}