首页 > 其他分享 >鸿蒙HarmonyOS NEXT:使用axios方法请求实时天气数据

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

时间:2024-08-15 15:52:20浏览次数:8  
标签:city axios Span string weatherData NEXT HarmonyOS 20 data

通过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%')
    }

  }

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

标签:city,axios,Span,string,weatherData,NEXT,HarmonyOS,20,data
From: https://blog.csdn.net/m0_63913945/article/details/141223356

相关文章

  • 初始化一个Abpvnext项目
    文章目录一、安装ABPCLI安装更新二、使用CLI创建项目命令解析官网连接三、调整项目结构四、配置统一返回结果1.创建响应码枚举2.创建响应实体3.创建响应实体(泛型)五、配置并使用统一返回结果过滤器1.创建NoWrapperAttribute2.创建ResultWrapperFilter3.在HttpApiHost......
  • axios访问后端,及后端返回前端报错跨域问题
    packagecom.example.demo.test.config;importorg.springframework.util.StringUtils;importjavax.servlet.*;importjavax.servlet.annotation.WebFilter;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjav......
  • 使用 Axios 下载文件并更新进度条
    使用Axios下载文件并更新进度条使用axios的onDownloadProgress回调函数实现下载文件,并更新下载进度条。示例代码import{ElMessage}from"element-plus";importaxiosfrom"axios";importtype{AxiosResponse,AxiosProgressEvent}from"axios";import{baseUrl......
  • HarmonyOS应用开发者高级认证(一)
    1、依次点击A、B、C、D四个按钮,其中不会触发UI刷新的是:答案: Button("C").onClick(()=>{this.nameList[0].name="Jim"})分析:直接更新非一级数据不会触发UI刷新2、如果要实现Row组件内的子元素均匀排列,且第一个元素与行首对齐,最后一个......
  • axios报错Module not found: Error: Package path ./lib/helpers/buildURL is not exp
    node12使用axios报错:Modulenotfound:Error:Packagepath./lib/helpers/buildURLisnotexportedfrompackageimportbuildURLfrom"axios/lib/helpers/buildURL";import{merge}from"axios/lib/utils";一、原因:对于importaxiosfrom‘./lib/......
  • 【鸿蒙学习】HarmonyOS应用开发者基础 - 应用程序框架基础
    从第一节的学习到现在,学习的人数越来越少,要相信,坚持学习下去的将会获得相应的收获。加油少年!!!一、应用框架基础1.应用  用户应用程序泛指运行在设备的操作系统之上,为用户提供特定服务的程序,简称“应用”。一个应用所对应的软件包文件,称为“应用程序包”。2.Module......
  • HarmonyOS NEXT 学习笔记6--prop装饰器-单向传递
    1.代码:@Entry@ComponentstructComponentQuestionCase{@Statemoney:number=999999;build(){Column(){Text('father:'+this.money)Button('存100块').onClick(()=>{this.money+=100})......
  • Vue3+vite+axios+.net api 配置
    exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{"@":fileURLToPath(newURL("./src",import.meta.url)),},},server:{host:"0.0.0.0",open:true,//启动项目自动弹出浏览器port:&qu......
  • HarmonyOS Developer之手势事件
    概述手势表示由单个或多个事件识别的语义动作(例如:点击、拖动和长按)。一个完整的手势也可能由多个事件组成,对应手势的生命周期。支持的事件有:触摸touchstart:手指触摸动作开始。touchmove:手指触摸后移动。touchcancel:手指触摸动作被打断,如来电提醒、弹窗。touchend:手指......
  • 鸿蒙HarmonyOS NEXT开发:全屏模态转场
    全屏模态转场通过bindContentCover属性为组件绑定全屏模态页面,在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。说明:从APIVersion10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。不支持横竖屏切换。不支持路由跳转。bin......