背景
本文以个人的鸿蒙开发项目为例,功能为高校查询,使用的API接口官网为:
官方API 参考为:
前期准备
首先需要配置网络访问权限
在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>