鸿蒙应用开发之数据请求

背景

本文以个人的鸿蒙开发项目为例,功能为高校查询,使用的API接口官网为:

我要查 - 专业API数据接口|IP地址查询|手机号码归属地查询|身份证号码查询|邮政编码查询|行政区划代码查询|院校代码/高等学校查询|POS商户编号|天气查询|快递查询https://www.woyaocha.net/

官方API 参考为:

数据请求-网络管理-接口-手机、平板、智慧屏和智能穿戴开发-JS API参考-HarmonyOS应用开发https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-network-data-request-0000000000626077

前期准备

首先需要配置网络访问权限

在mian目录下的config.json文件中的module中添加网络权限

"module": {
        ...
    "reqPermissions": [
      {
        "reason": "",
        "name": "ohos.permission.INTERNET"
      },
}

 实现

本文采用的是鸿蒙js环境中的fetch接口(如果项目的SDK版本为API Version 6或以上推荐使用http接口)

导入模块

在js文件中导入模块

import fetch from '@system.fetch';

鸿蒙数据请求默认支持https协议,如使用接口的协议为http,需要在config.json里增加network标签,属性标识 "cleartextTraffic": true。即:

{
  "deviceConfig": {
    "default": {
      "network": {
        "cleartextTraffic": true
      }
      ...
    }
  }
}

创建变量以接收返回值

export default {
    data: {
        School:[],
    },
...
}

编写数据请求函数,使用fetch.fecth发起数据请求。

由于本文使用的API接口需要sha256加密,所以推荐使用组件为

Gitee 极速下载/js-sha256https://gitee.com/mirrors/js-sha256?_from=gitee_search在js的开头使用一下代码以导入sha256插件。

var sha256=require('js-sha256').sha256;

根据插件要求对数据进行加密(如使用API接口文档中没有要求请忽略此步骤)。

var Key=sha256("appid=10000###&module=getUniversityInfo&school="+SchoolName+"&appkey=094b8337af541d9e6cdd5daff1111111");   

以上appid和appkey均为不可用状态,详情请查看文章开头的API参考文档。

参数

参数名类型必填说明

url

string

发起网络请求的URL地址。

callback

AsyncCallback<HttpResponse>

回调函数。

数据请求实现代码

推荐将请求到的数据转成JSON格式,代码为:

this.responseData=JSON.parse(response.data);

 数据请求代码:

        fetch.fetch({
            url: "https://cha.ebaitian.cn/api/json?type=get&appid=10000###&module=getUniversityInfo&school="+SchoolName+"&sign="+that.Key,
            responseType:"json",
            success:function(response){
                that.responseData=JSON.parse(response.data);
                    var addItem={
                        school_img:"/common/images/School/BSchool.png",
                        school_name:that.responseData.universityInfo.uname,
                        address:that.responseData.universityInfo.area,
                        piece:[
                            {
                                id:that.responseData.universityInfo.levels
                            },
                            {
                                id:that.responseData.universityInfo.nature
                            },
                            {
                                id:that.responseData.universityInfo.genre
                            }
                        ]
                    };
                console.info("查询成功");
            },
            fail(){
                console.info("异常")
            }
        });

将接收到的数据插入到定义好的变量中:

this.School.unshift(addItem);

网络请求完整代码:

InitSelect(SchoolName){
        var Key=sha256("appid=10000###&module=getUniversityInfo&school="+SchoolName+"&appkey=094b8337af541d9e6cdd5daff1111111");
        console.log(that.Key);
        fetch.fetch({
            url: "https://cha.ebaitian.cn/api/json?type=get&appid=10000###&module=getUniversityInfo&school="+SchoolName+"&sign="+Key,
            responseType:"json",
            success:function(response){
                that.responseData=JSON.parse(response.data);
                    var addItem={
                        school_img:"/common/images/School/BSchool.png",
                        school_name:that.responseData.universityInfo.uname,
                        address:that.responseData.universityInfo.area,
                        piece:[
                            {
                                id:that.responseData.universityInfo.levels
                            },
                            {
                                id:that.responseData.universityInfo.nature
                            },
                            {
                                id:that.responseData.universityInfo.genre
                            }
                        ]
                    };
                this.School.unshift(addItem);
                console.info("查询成功");
            },
            fail(){
                console.info("异常")
            }
        });
    },

实现自动查询

在data中创建select_name数组。

select_name:["浙江大学","北京科技大学","清华大学","北京大学"],

 在生命周期函数onInit中实现将select_name数组中的院校名称依次传入InitSelect函数。

    onInit(){
        var that=this;
        that.select_name.forEach(element => {
            that.InitSelect(element);
        });
    },
    ...

以上代码即可实现鸿蒙js开发中的数据请求

前端部分代码:

 <div class="container">
    <div class="main">
        <div class="content">
            <list>
                <list-item class="school_div" for="School">
                    <div class="SchoolContent">
                        <image class="School_img" src="{{$item.school_img}}"></image>
                        <div class="content_school" >
                            <text class="School_Name">{{$item.school_name}}</text>
                            <text class="address">{{$item.address}}</text>
                            <div class="piece_div">
                                <div class="piece" for="$item.piece">
                                    <text>{{$item.id}}</text>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="Number_divider_div">
                        <divider class="Number_divider"></divider>
                    </div>
                </list-item>
            </list>
        </div>
    </div>
</div>

实现效果

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是刘小猿呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值