鸿蒙开发-基础HTTP网络请求

SiMoooooo

578人浏览 · 2025-06-04 11:08:44

SiMoooooo · 2025-06-04 11:08:44 发布

前言

如果是计算机相关专业的同志想必对HTTP协议并不陌生，《计算机网络》对这个有详细的叙述，当然如果记不清了，也可以使用以下几个链接自行查看：

HTTP 教程 | 菜鸟教程、HTTP_百度百科、https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE

好，回归正题。任何的编程语言都逃不开网络请求，这是一个非常非常基本的需求，那么在鸿蒙开发中是怎么处理的呢？ArkTS提供了两种方式：HTTP网络服务能力（文档中心）和RCP（文档中心），这里仅简单介绍一下标准HTTP请求的基本使用方式。

使用

在鸿蒙开发中HTTP常见的有四种请求方式：GET、POST、PUT和DELETE，其他方式可以自行查看文档。

以下代码，结构为：

各种网络请求服务在httpService中，各种界面样式在Index中，下不赘述。

申请权限

在使用网络请求这个功能时需要申请网络权限，声明方法如下（不再赘述）：

//在需要的模块下的modeule.json5中写明
"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

网络请求

1.建立一个请求任务，切记不可重复使用：

let httpRequest: http.HttpRequest = http.createHttp();

2.配置请求信息：

let options: http.HttpRequestOptions = {
  method: http.RequestMethod.GET,   //也可以写POST、DELETE、PUT，下面的具体写法根据请求类型调整
  /*header: {
  如果需要配置请求头，写在这。这个地方和服务端相关性很大，需要和服务端提前沟通。这里由于只是测试就不写了
  },*/
  /*extraData: {
    使用POST时需要发送的数据写这里            
  }*/

};

3.配置请求参数：

  let params = new url.URLParams({
    //各种参数
  });

4.配置请求地址：

let urlPath= `url地址?${params.toString()}`;

5.开始请求和结束

//这是一个异步函数。。
httpRequest.request(url, options) 
  .then((result: http.HttpResponse) => {
    //请求成功之后执行这里
    if (result.responseCode >=200 && result.responseCode<300) {
      console.log(`获取数据成功：${result.result.toString()}`)
    }else{
      console.log("获取数据失败")
    }
  })
  .catch((err: Error) => {
    //请求失败之后执行这里
    console.log("请求失败"+JSON.stringify(err))
  }).finally(() => {
    //无论成不成功都执行这里
    console.log("请求结束")
    httpRequest.destroy()         //销毁请求
  })

当然，上面写法不是太方便，如果我需要返回数据就有点麻烦了，那么就有下面这种写法：

let res: http.HttpResponse = await httpRequest.request(urlPath, options);

显然，只看这些东西还是不好理解，不要急，我们通过一个非常简单的实例来理解。

实例（Windows11环境下）

安装json-server服务器

为了让新手也可以直接体会，我们用一个非常非常简单的服务器：json server。

1.在Node.js官网首页下载node.js和对应的npm：Node.js — 在任何地方运行 JavaScript（官网）

2.检测安装是否成功：

在“终端”运行

node -v
npm -v

如果可以正常显示它们的版本，那么就说明正常安装，如果不可以，，，，那你就需要卸载重新安装或查找其他文章去解决了，通常来说，不会出问题的，至少身边还没遇到过失败的。

3.安装完毕之后，使用以下代码安装json server服务器：

npm install -g json-server

配置json server服务器

先创建一个简单的json文件（用记事本）：这个文件格式出错一点都会导致后续失败

{
  "data": [
    {
      "id": "1",
      "text": "你好"
    },
    {
      "id": "2",
      "text": "世界"
    }
  ]
}

保存为aaa.json

然后在终端中启动服务器及其包含文件：

打开“终端”，输入以下命令：

1.跳转至文件保存目录，如：
cd E:\json\harmony
2. 输入以下命令，启动服务器并将该文件作为服务器中文件
json-server --watch aaa.json

至此，服务开启完毕，如果不确定可不可，可以将最后一行的链接贴到浏览器中查看，如果可以访问就是正确的。

GET实例

//记得申请权限

export async function getInfo() {
  let httpRequest: http.HttpRequest = http.createHttp();
  let options: http.HttpRequestOptions = {
    method: http.RequestMethod.GET,
    header: {
      "Accept": "application/json"  // 确保服务器返回 JSON
    }
  }
  let params = new url.URLParams({
    id:"1"
  });
  let urlPath= `http://10.0.2.2:3000/data?${params.toString()}`;
  let res: http.HttpResponse = await httpRequest.request(urlPath, options);
  //console.log("返回数据",res.result)      这里你可以看到返回的数据
  let info=JSON.parse(res.result.toString()) as Info[]       //这里切记返回的是数组，这里不注意会经常卡住，而且会感觉莫名其妙，不好调试，如果好奇，你可以将上一段注释代码取消注释看看输出格式
  return info[0];
}

export interface Info {
  id: string;
  text: string;
}

import { getInfo, Info } from '../../service/httpService';   //自己改一下，也可以删掉自己导入

@Entry
@Component
struct Index {
  @State info:Info= {
    id: "0",
    text: '未赋值'
  }

  aboutToAppear() {
    this.loadData()
  }

  async loadData() {
    const res= await getInfo()
    this.info=res
  }

  build() {
    Column() {
      Text(`GET获取数据：${this.info.id}|${this.info.text}`).fontSize(20)
    }
    .width('100%')
    .height('100%')
  }
}

输出如下图，很显然，和上面创建的json文件一致。

POST实例

类似的我们可以试试POST方法，给服务器中文件添加数据。

export async function postInfo(){
  let httpRequest: http.HttpRequest = http.createHttp();
  let options: http.HttpRequestOptions = {
    method: http.RequestMethod.POST,
    extraData:{
      id:"4",
      text:"这里是测试数据"
    }
  }
  let urlPath= 'http://10.0.2.2:3000/data';
  let res: http.HttpResponse = await httpRequest.request(urlPath, options);
  //console.log("返回数据",res.result)  如果添加成功会返回你添加的数据
}

在刚刚GET的基础上，在index文件中加上一个按钮，并绑定按钮。

//写在build外面 
 async postInfo(){
    await postInfo()
  }

//上下两部分分开的,别写在一起

//写在build里面
Button('POST').width('60%').onClick(()=>{
        this.postInfo()
      })

点击之后会发现，json文件中添加了这个数据：

PUT实例

我们用PUT请求，修改一下刚刚这条数据。

export async function putInfo(){
  let httpRequest: http.HttpRequest = http.createHttp();
  let options: http.HttpRequestOptions = {
    method: http.RequestMethod.PUT,
    extraData:{
      text:"这里是修改后的新数据"     //put会替代原有数据，但是不包括id
    }
  }
  let urlPath= 'http://10.0.2.2:3000/data/4';//这里理论上可以用get请求的那种参数写法，但是！！！这个服务器不支持，请读者记住
  let res: http.HttpResponse = await httpRequest.request(urlPath, options);
}

照样，在Index中加一个按钮：

  async putInfo(){
    await putInfo()
  }


Button('PUT').width('60%').onClick(()=>{
        this.putInfo()
      })

点击一下这个按钮，将将~修改成功：

DELETE实例

最后试一下删除：

export async function deleteInfo(){
  let httpRequest: http.HttpRequest = http.createHttp();
  let options: http.HttpRequestOptions = {
    method: http.RequestMethod.DELETE,
  }
  let urlPath= 'http://10.0.2.2:3000/data/4';
  let res: http.HttpResponse = await httpRequest.request(urlPath, options);
}

添加一下按钮：

async deleteInfo(){
    await deleteInfo()
  }

Button('DELETE').width('60%').onClick(()=>{
        this.deleteInfo()
      })

点一下，删除完成：

至此，四种常用的用法都演示完毕，初学者可以试着敲一下，难度很低，很容易理解。不过呢，这样似乎有些枯燥，我们来点花活。。。。

一个有趣的示例

我们找一个真实的网站，我们试试GET请求获取真实数据。

有些网站呢，需要获取x-host才可以访问

所以最后，我们实际上代码是这样的：

export async function getData() {
  let httpRequest: http.HttpRequest = http.createHttp();
  let options: http.HttpRequestOptions = {
    method: http.RequestMethod.GET,
    header: {
      "x-host": "mall.film-ticket.film.list",
    }
  };
  let params = new url.URLParams({
    cityId: "110100",
    pageNum: "1",
    pageSize: "10",
    type: "1",
    k: "3114067",
  });

  let urlPath = `https://m.maizuo.com/gateway?${params.toString()}`;
  let res: http.HttpResponse = await httpRequest.request(urlPath, options);
  //console.log("返回数据",res.result)
  let data=JSON.parse(res.result.toString()) as FilmData;
  //console.log("data信息",JSON.stringify(data.data));
  return data
}

由于，这个ArkTS不同于JS，他需要明确写明数据类型，所以需要根据返回的信息处理这些数据，需要写明对应的接口或类。而这次获取的数据结构需要写明以下接口：

export interface Actor {
  name: string;
  role: string;
  avatarAddress: string;
}

export interface FilmType {
  name: string;
  value: number;
}

export interface FilmItem {
  name: string;
  type: number;
}

export interface Film {
  filmId: number;
  name: string;
  poster: string;
  actors: Actor[];
  director: string;
  category: string;
  synopsis: string;
  filmType: FilmType;
  nation: string;
  language: string;
  videoId: string;
  premiereAt: number;
  timeType: number;
  runtime: number;
  grade: string;
  item: FilmItem;
  isPresale: boolean;
  isSale: boolean;
}

export interface FilmDataContent {
  films: Film[];
  total: number;
}

export interface FilmData {
  status: number;
  data: FilmDataContent;
  msg: string;
}

在Index页面写明：

import { Film, FilmData, getData} from '../../service/httpService';

@Entry
@Component
struct Index {
  @State data:FilmData= {
    status: 0,
    data:{
      films:[],
      total:0
    },
    msg: ''
  }

  aboutToAppear() {
    this.loadData()
  }

  async loadData() {
    const res = await getData();
    this.data = res;
    console.log(JSON.stringify(res));
  }

  build() {
    Column({space:10}) {
      ForEach(this.data.data.films,(item:Film)=>{
        Text(item.name)
          .width('100%')
          .fontSize(20)
          .fontWeight(FontWeight.Medium)
      })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

然后一执行，就有：