OpenHarmony/HarmonyOS中如何进行Http请求

OpenHarmony/HarmonyOS中如何进行Http请求

使用设备

润和大禹200

SDK版本：3.Release适用

作者：坚果
团队：坚果派
公众号：“大前端之旅”
润开鸿技术专家，华为HDE，InfoQ签约作者，OpenHarmony布道师，擅长HarmonyOS应用开发、熟悉服务卡片开发，在“战码先锋”活动中作为大队长，累计培养三个小队长，带领100+队员完成Pr的提交合入。
欢迎通过主页或者私信联系我，加入坚果派，一起学习OpenHarmony/HarmonyOS应用开发。

应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

HTTP数据请求功能主要由http模块提供。

效果

准备工作

本次我们要实现的是油价的查询，大家可以使用这一个API来做测试

这里是对应的Key值2b9c1e5d6089c5ddb75dbf32610632bc

接口地址：

http://apis.juhe.cn/gnyj/query

使用方法：

Get

请求地址：

https://apis.juhe.cn/gnyj/query?key=2b9c1e5d6089c5ddb75dbf32610632bc

Header：
Content-Type：application/x-www-form-urlencoded

权限

使用该功能需要申请ohos.permission.INTERNET权限。

在module.json5中添加权限

"requestPermissions": [
  {
    
    
    "name": "ohos.permission.INTERNET"
  }
],

request接口开发步骤

1.导入HTTP模块

从@ohos.net.http.d.ts中导入http命名空间。

// 引入包名
import http from '@ohos.net.http';

2.调用createHttp()方法，

创建一个HttpRequest对象。

// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();

3.调用该对象的on()方法

订阅http响应头事件，此接口会比request请求先返回。可以根据业务需要订阅此消息。（可选）

httpRequest.on('headersReceive', (header) => {
    
    
  console.info('header: ' + JSON.stringify(header));
});

4.调用该对象的request()方法

传入http请求的url地址和可选参数，发起网络请求。

httpRequest.request(
  // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定"EXAMPLE_URL",
  {
    
    
    method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
    // 开发者根据自身业务需要添加header字段
    header: {
    
    
      'Content-Type': 'application/json'
    },
    // 当使用POST请求时此字段用于传递内容
    extraData: {
    
    
      "data": "data to send",
    },
    expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
    usingCache: true, // 可选，默认为true
    priority: 1, // 可选，默认为1
    connectTimeout: 60000, // 可选，默认为60000ms
    readTimeout: 60000, // 可选，默认为60000ms
    usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
    usingProxy: false, //可选，默认不使用网络代理，自API 10开始支持该属性
  }, (err, data) => {
    
    
  
  }

5.按照实际业务需要，解析返回结果。

(err, data) => {
    
    
    if (!err) {
    
    
      // data.result为HTTP响应内容，可根据业务需要进行解析
    
    } else {
    
    
      console.info('error:' + JSON.stringify(err));
      
    }

6.调用该对象的off()方法

取消订阅http响应头事件。

      httpRequest.off('headersReceive');
  

7.当该请求使用完毕时

调用destroy()方法主动销毁。

      httpRequest.destroy();
    

完整代码

import http from '@ohos.net.http';
import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';
/**
 * @ProjectName : Oilprice
 * @FileName : WeiXinPage
 * @Author : 坚果
 * @Time : 2023/7/1 14:40
 * @Description : 文件描述
 */

@Component
export struct WeiXinPage {
    
    
  @State data: string = ""

  getHttp() {
    
    


    // 每一个httpRequest对应一个HTTP请求任务，不可复用
    let httpRequest = http.createHttp();

    httpRequest.request(
      "https://apis.juhe.cn/gnyj/query?key=2b9c1e5d6089c5ddb75dbf32610632bc",
      {
    
    
        method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
    
    
          'Content-Type': 'application/x-www-form-urlencoded'
        },

        expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
        usingCache: true, // 可选，默认为true
        priority: 1, // 可选，默认为1
        connectTimeout: 60000, // 可选，默认为60000ms
        readTimeout: 60000, // 可选，默认为60000ms
        usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定

      }, (err, data) => {
    
    
      if (!err) {
    
    
        // data.result为HTTP响应内容，可根据业务需要进行解析
        this.data = JSON.stringify(data.result)
        promptAction.showToast({
    
    

          message: this.data.toString(),
          duration: 6000,
          bottom: 400
        })

        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy();
      } else {
    
    
        console.info('error:' + JSON.stringify(err));
        // 取消订阅HTTP响应头事件
        httpRequest.off('headersReceive');
        // 当该请求使用完毕时，调用destroy方法主动销毁
        httpRequest.destroy();
      }
    }
    );
    
  }

  build() {
    
    
    Column() {
    
    
      Button("获取数据").onClick(() => {
    
    
        this.getHttp()

      })
      Text(this.data).fontSize(18)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

完毕