Многие вызовы API в componentDidMount - PullRequest
Новая
       10

Многие вызовы API в componentDidMount

0 голосов
/ 11 марта 2020

Мой API возвращает данные о продажах ежемесячно, я пытаюсь отобразить данные за последние два года на графике апекса в ответ. Я пытаюсь вызывать 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
                }
            }
        })
    }

Где я утешаю .log, результаты ничего не возвращаются. Я предполагаю, что мне нужно как-то дождаться возвращаемого значения запроса get для каждого l oop, однако я не уверен, как выполнить sh this.

1 Ответ

2 голосов
/ 11 марта 2020

Это ноль, потому что console.log(data); выполняется перед вашим .then(...) предложением.

Я предлагаю вам прочитать больше о Scope / Scoping в JS, Обещания , Функции обратного вызова и 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
      }
    }
  })
}
...