鸿蒙应用开发之数据请求_鸿蒙js开发模式下请求接口封装

背景

本文以个人的鸿蒙开发项目为例，功能为高校查询，使用的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参考文档。

参数

数据请求实现代码

推荐将请求到的数据转成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>

实现效果