Question

我正在处理API（AccuWeather）中与天气数据有关的一些数据。我想在HTML中实现几个元素。我正在尝试/捕获使用异步/等待功能。问题是，可以说有很多重复的代码。看看：

    try {
       const res2 = await axios(`http://dataservice.accuweather.com`)
                this.data = res2.data.DailyForecasts;
                // Dates
                this.date1 = this.data[0].Date;
                this.date2 = this.data[1].Date;
                this.date3 = this.data[2].Date;
                this.date4 = this.data[3].Date;
                this.date5 = this.data[4].Date;
                // Temperature Maximum
                this.tempMax1V = this.data[0].Temperature.Maximum.Value;
                this.tempMax1U = this.data[0].Temperature.Maximum.Unit;
                this.tempMax2V = this.data[1].Temperature.Maximum.Value;
                this.tempMax2U = this.data[1].Temperature.Maximum.Unit;
                this.tempMax3V = this.data[2].Temperature.Maximum.Value;
                this.tempMax3U = this.data[2].Temperature.Maximum.Unit;
                this.tempMax4V = this.data[3].Temperature.Maximum.Value;
                this.tempMax4U = this.data[3].Temperature.Maximum.Unit;
                this.tempMax5V = this.data[4].Temperature.Maximum.Value;
                this.tempMax5U = this.data[4].Temperature.Maximum.Unit;
                // Temperature Minimum
                this.tempMin1V = this.data[0].Temperature.Minimum.Value;
                this.tempMin1U = this.data[0].Temperature.Minimum.Unit;
                this.tempMin2V = this.data[1].Temperature.Minimum.Value;
                this.tempMin2U = this.data[1].Temperature.Minimum.Unit;
                this.tempMin3V = this.data[2].Temperature.Minimum.Value;
                this.tempMin3U = this.data[2].Temperature.Minimum.Unit;
                this.tempMin4V = this.data[3].Temperature.Minimum.Value;
                this.tempMin4U = this.data[3].Temperature.Minimum.Unit;
                this.tempMin5V = this.data[4].Temperature.Minimum.Value;
                this.tempMin5U = this.data[4].Temperature.Minimum.Unit;
                // Day Status
                this.day1 = this.data[0].Day.IconPhrase;
                this.day2 = this.data[1].Day.IconPhrase;
                this.day3 = this.data[2].Day.IconPhrase;
                this.day4 = this.data[3].Day.IconPhrase;
                this.day5 = this.data[4].Day.IconPhrase;
                // Night Status
                this.night1 = this.data[0].Night.IconPhrase;
                this.night2 = this.data[1].Night.IconPhrase;
                this.night3 = this.data[2].Night.IconPhrase;
                this.night4 = this.data[3].Night.IconPhrase;
                this.night5 = this.data[4].Night.IconPhrase;
                console.log(res2);
            } catch (error) {
                console.log(error);

那么有可能使用forEach或类似的高阶函数来最小化此代码吗？我也有HTML结构，它具有一组块（5个块），每个块显示来自API调用的不同数组的不同数据。这就是为什么我对每个特定数据都有5个元素。

Answer 1

for (var i = 0; i < 5; i++) {
    var ii = i + 1;
    this["date" + ii] = this.data[i].Date;
    this["tempMax" + ii + "V"] = this.data[i].Temperature.Maximum.Value;
    this["tempMax" + ii + "U"] = this.data[i].Temperature.Maximum.Unit;
    this["tempMin" + ii + "V"] = this.data[i].Temperature.Minimum.Value;
    this["tempMin" + ii + "U"] = this.data[i].Temperature.Minimum.Unit;
    this["day" + ii] = this.data[i].Day.IconPhrase;
    this["night" + ii] = this.data[i].Night.IconPhrase;
}

Answer 2

那么有可能使用forEach或类似的高阶函数来最小化此代码吗？

...通常，基于reduce的方法非常方便...

    function accumulateDataFromForecastItem(type, dataItem, idx) {
      let keyPartial, temperature;

      idx = (idx + 1);

      // Dates
      type['date' + idx] = dataItem.Date;

      // Temperature Maximum
      keyPartial  = ('tempMax' + idx);
      temperature = dataItem.Temperature.Maximum;

      type[keyPartial + 'V'] = temperature.Value;
      type[keyPartial + 'U'] = temperature.Unit;

      // Temperature Minimum
      keyPartial  = ('tempMin' + idx);
      temperature = dataItem.Temperature.Minimum;

      type[keyPartial + 'V'] = temperature.Value;
      type[keyPartial + 'U'] = temperature.Unit;

      // Day Status
      type['day' + idx] = dataItem.Day.IconPhrase;

      // Night Status
      type['night' + idx] = dataItem.Night.IconPhrase;

      return type;
    }

    function assignDailyForecastData(type, dataItemList) {
      type.data = Array.from(dataItemList); // assign a complete copy.

      dataItemList.length = 5; // limit forecast-data array-length to 5.
      dataItemList.reduce(accumulateDataFromForecastItem, type);
    }

    try {
      const res2 = await axios(`http://dataservice.accuweather.com`);

      console.log(res2);

      assignDailyForecastData(this, res2.data.DailyForecasts);

    } catch (exc) {

      console.log(exc);
    }

如何使此API数据操作更整洁？

2 个答案: