鸿蒙HarmonyOS NEXT:使用axios方法请求实时天气数据

通过axios方法请求高德天气查询api，实现获取实时天气数据，接下来是实现步骤：

模块导入与数据准备：

通过以下语句导入了必要的模块和数据：

import axios , { AxiosResponse,AxiosError }from '@ohos/axios'//导入axios
import { cities } from './tools/citys'; //调用事先存好的城市中英文名

接口与数据结构定义：

定义了关键的接口和数据结构：

• City 接口用于描述城市的中英文名。
• WeatherData 接口用于定义天气相关的数据字段。

export  interface City {
  enName: string;
  cnName: string;
}
//定义接口
interface WeatherData{
  province:string//省份
  city:string//城市
  adcode:number//地区编码
  weather:string//天气
  temperature:number//温度
  winddirection:string//风向
  windpower:string//风力
  humidity:number//湿度
  reporttime:string//时间
  temperature_float:number//温度的浮点形式
  humidity_float:number//湿度的浮点形式
}

WeatherPage结构体与状态管理：

在 WeatherPage 结构体中：

• @State 变量 weatherData 用于存储天气数据，初始为空数组，
• @State 变量 city 用于存储当前查询的城市，初始值为“北京”，
• @State 变量 city_data 用于暂存输入的城市数据，
• @State 变量 loading 用于控制页面的加载状态：

 @State weatherData:WeatherData[]=[]//用来接受传回来的数据
  @State city:string='北京'//用来修改请求城市，初始值为北京
  @State city_data:string=''
  @State loading:boolean=false//用来确认是否渲染

网络请求与数据获取：

request 方法承担了发送网络请求并处理响应的重要职责：

  它使用 axios 发送一个 get 类型的网络请求到特定的 URL ，然后，根据请求的响应状态进行相应的处理，如果响应状态码为 200 ，意味着查询成功，否则，表示查询失败，并打印相应的错误信息：

request(){
    axios<string, AxiosResponse<string>, null>(
      {
        method:"get",//请求方法
        url:`https://restapi.amap.com/v3/weather/weatherInfo`,//请求路径
        //参数
        params:{
          'key':'your_key',//密钥
          'city':this.city,//城市
          'extensions':'base'//返回实况天气
        }
      }
    )
      .then((resp:AxiosResponse) => {
        if (resp.status === 200) {
          // 查询成功
          console.log('请求成功！', JSON.stringify(resp.data))
          this.weatherData.splice(0,1)//先删除前面数据
          this.weatherData=this.weatherData.concat(resp.data.lives)//把请求过来的数据赋值
          this.loading=true
        } else {
          //查询失败
          console.log('请求失败！error:', JSON.stringify(resp))
        }
      })
      .catch((error:AxiosError) => {
        console.log('请求失败！error1:', JSON.stringify(error))
      })
  }

  aboutToAppear 方法在页面即将显示时被调用，其主要任务是执行 request 方法，以提前获取天气数据：

async aboutToAppear(): Promise<void> {
    await this.request()
  }

城市名称转换方法：

getChineseCityName 方法用于将用户输入的城市英文名转换为对应的中文名：

它通过遍历事先准备好的城市数据数组 cities ，将输入的城市英文名转换为小写后进行匹配，如果找到匹配项则返回对应的中文名，否则返回空字符串：

//把输入城市的英文转换为中文
  getChineseCityName(key:string){
    let lowerCityName=key.toLowerCase()
   for(const data_city of cities){
     if (lowerCityName==data_city.enName) {
       return data_city.cnName
     }
   }
   return  ''
  }

页面构建与渲染：

根据 loading 的状态来决定是否进行页面的渲染。

   当 loading 为 true 时，即数据已成功加载，页面会进行如下展示,提供一个文本输入框，用户可以在此输入要查询的城市，并且输入内容的变化会触发相应的事件，随后，以行和列的形式展示天气的详细信息，包括城市名称、更新时间、天气状况、温度、湿度、风向和风速等：

  build() {
    //判断是否要渲染
    if (this.loading){
      Column(){
        TextInput({placeholder:'请输入城市'})
          .onChange((text:string)=>{
            //获取TextInput里的文本
            this.city_data=text
          })
        Button('查询实时天气')
          .alignSelf(ItemAlign.Center)
          .onClick(()=>{
            //先判断是否查询到该城市
            if (this.getChineseCityName(this.city_data)) {
              this.city=this.getChineseCityName(this.city_data)
            }else {
              //没有该城市后弹窗
              AlertDialog.show({message:'暂无该城市'})
            }
            this.request()
          })
          Row({space:20}){
            Text('城市：').fontSize(20)
            Text(this.weatherData[0].city).fontSize(20)
          }
          .margin(5)
        //使用flex布局
          Flex({wrap:FlexWrap.Wrap}){
            Text(){
              Span('更新时间：')
              Span(this.weatherData[0].reporttime)
            }
            .fontSize(20)
            .margin(5)
            Text(){
              Span('天气：')
              Span(this.weatherData[0].weather)
            }
            .fontSize(20)
            .margin(5)
            Text(){
              Span('温度：')
              Span(this.weatherData[0].temperature_float.toString())
              Span('°C')
            }
            .fontSize(20)
            .margin(5)
            Text(){
              Span('湿度：')
              Span(this.weatherData[0].humidity.toString())
              Span('%')
            }
            .fontSize(20)
            .margin(5)

            Text(){
              Span('风向：')
              Span(this.weatherData[0].winddirection)
              Span('风')
            }
            .fontSize(20)
            .margin(5)
            Text(){
              Span('风速：')
              Span(this.weatherData[0].windpower.toString())
              Span('级')
            }
            .fontSize(20)
            .margin(5)
          }
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }

  }

  注意在实际开发中，需要注意网络请求的稳定性和错误处理，以及根据不同的设备和屏幕尺寸进行页面布局的优化，以提供更好的用户体验。