许多 API 调用 componentDidMount

Question

我的 API return 每月的销售数据，我试图在 React 的顶点图表中显示最近两年的数据。我试图每个月多次调用 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
                }
            }
        })
    }

我 console.log 输出什么都没有 return 但是。我假设我需要以某种方式等待每个循环中获取请求的 return 值，但是我不确定如何完成此操作。

Answer 1

它为空，因为 console.log(data); 在 .then(...) 子句之前执行。

我建议你阅读更多关于 Scope/Scoping in JS, Promises, Callback functions and async/await 的内容，因为它们在 JS 中非常重要。

这应该有效：

使用承诺：

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/await：

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
      }
    }
  })
}

许多 API 调用 componentDidMount

Many API calls in componentDidMount

javascript

reactjs

axios

apexcharts

使用承诺：

使用async/await：