天气应用无法在控制台打印信息 函数调用及前端渲染问题咨询

问题1：导出的getDailyWeatherByCountry函数应该在什么位置、以何种方式调用？ #

这个异步接口函数可以在页面初始化完成的节点调用，比如原生JS的DOMContentLoaded事件回调、React的useEffect钩子、Vue的onMounted钩子都可以，只要保证调用时依赖的环境变量、API实例都已经初始化完成就行。

调用前建议先优化原函数，补充回调调用和返回值：

export const getDailyWeatherByCountry = async ({city, country}, success, failure) => {
  try {
    // 原有逻辑不变
    // ... 省略原有代码
    console.log(formatedDays[0])
    // 新增：调用成功回调、返回格式化后的数据
    success?.(formatedDays)
    return formatedDays
  } catch (err) {
    // 新增：调用失败回调、抛出错误方便上层捕获
    failure?.(err)
    throw err
  }
}

调用示例（原生JS）：

import { getDailyWeatherByCountry } from './你的文件路径'

document.addEventListener('DOMContentLoaded', async () => {
  try {
    const weatherData = await getDailyWeatherByCountry(
      { city: '广州', country: '中国' },
      res => console.log('请求成功', res),
      err => console.log('请求失败', err)
    )
    console.log('拿到格式化后的天气数据：', weatherData)
  } catch (e) {
    console.error('调用异常', e)
  }
})

问题2：如何执行代码才能让应用将从两个API获取到的信息打印到控制台？ #

首先要完成前置配置：

1. 分别去openweathermap、opencagedata平台申请对应API密钥，配置到项目的环境变量里（比如.env文件中添加WEATHER_API_KEY=你申请的密钥、LOCATION_API_KEY=你申请的密钥），确保项目启动时能正常读取这两个变量。
2. 按照问题1里的方法正确调用函数即可，你原有代码里已经写了多个console.log语句，接口请求成功后会自动在控制台打印原始接口返回的日度天气数据、格式化后的单日天气数据。如果没有打印，优先检查控制台报错，常见原因是API密钥无效、跨域限制、城市国家参数格式错误。

问题3：信息成功打印后，如何在前端对数据进行处理，比如展示在简易卡片组件上？ #

核心思路是把接口返回的格式化后的数据存到页面状态中，再遍历状态渲染卡片组件即可，以下是React框架的示例：

import { useState, useEffect } from 'react'
import { getDailyWeatherByCountry } from './api/weather'

// 单日天气卡片组件
const WeatherCard = ({ dayInfo }) => {
  return (
    <div className="weather-card" style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '16px', width: '180px' }}>
      <h4>{dayInfo.weekDay}</h4>
      <p>当日温度：{dayInfo.temp}℃</p>
      <p>云量：{dayInfo.cloudLevel}%</p>
      <p>日出时间：{dayInfo.sunrise}</p>
      <p>日落时间：{dayInfo.sunset}</p>
      <p>风速：{dayInfo.windSpeed}m/s</p>
    </div>
  )
}

// 天气列表页面
const WeatherPage = () => {
  const [dailyWeather, setDailyWeather] = useState([])

  // 页面加载时拉取数据
  useEffect(() => {
    const fetchWeather = async () => {
      const data = await getDailyWeatherByCountry({ city: '深圳', country: '中国' })
      setDailyWeather(data)
    }
    fetchWeather()
  }, [])

  return (
    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', padding: '20px' }}>
      {dailyWeather.map((item, idx) => (
        <WeatherCard key={idx} dayInfo={item} />
      ))}
    </div>
  )
}

export default WeatherPage

如果是用Vue或者原生JS，逻辑也是类似的：拿到数据后插入到DOM节点中即可。

内容的提问来源于stack exchange，提问作者mrvanagas