#Dayu200体验官# 第四章 openharmony eTS之网络请求http 原创精华

yukoyu

发布于 2022-5-25 22:18

浏览

3收藏

#Dayu200体验官#第四章 openharmony eTS之网络请求http

一、eTS之网络通讯http讲解

1、头文件

import http from '@ohos.net.http';
1.

2、createHttp() 接口

let httpRequest = http.createHttp();
1.

参数：null

返回类型：HttpRequest
1.
2.
3.

3、httpRequest.request()接口

参数：

参数名	类型	必填	说明
url	string	是	发起网络请求的URL地址。
callback	AsyncCallback<>	是	回调函数。

4、httpRequest.on()接口

参数：

参数名	类型	必填	说明
type	string	是	订阅的事件类型：‘headersReceive’。
callback	Callback<Object>	是	回调函数。

5、httpRequest.off()接口

参数：

参数名	类型	必填	说明
type	string	是	取消订阅的事件类型：‘headersReceive’。
callback	Callback<Object>	否	回调函数。

二、添加网络权限

1、添加网络权限

"reqPermissions": [{
      "name": "ohos.permission.INTERNET"
   }],
1.
2.
3.

2、支持http协议（默认支持https）

"default": {
   "network": {
      "cleartextTraffic": true
   }
}
1.
2.
3.
4.
5.

#Dayu200体验官# 第四章 openharmony eTS之网络请求http-鸿蒙开发者社区

三、eTS http之get请求

1、eTS get请求代码：

// @ts-nocheck
import http from '@ohos.net.http';
@Entry
@Component
struct Index {
  @State message: string = "hello";
  httpRequest:http.HttpRequest = http.createHttp();

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button('get', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .fontSize(50)
          .width(200)
          .onClick(() => {    //点击事件
            this.httpget();
          })
      }
      .width('100%')
    }
    .height('100%')
  }

  private httpget() {
    this.httpRequest.request(
      //请求地址
      "http://192.168.0.36:5000",
      {
        method: http.RequestMethod.GET,	//或者使用 method: http.RequestMethod.POST,
        header: {
          'Content-Type': 'application/json'
        },
        extraData: {
          "data": "data to send",
        },
        connectTimeout: 60000,
        readTimeout: 60000,
      }, (err, data) => {
      if (!err) {
        console.info('Result:' + data.result);
        //json string 转 obj
        var obj = JSON.parse(data.result);
        this.message = obj.data;
        console.info('code:' + data.responseCode);
        console.info('header:' + JSON.stringify(data.header));
        console.info('cookies:' + data.cookies);
      } else {
        console.info('error:' + JSON.stringify(err));
        this.httpRequest.destroy();
      }
    }
    );
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

2、后端代码

使用python flask 实现简单的后端

import json
from flask import Flask, request
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_restful import Api
from flask_restful import Resource
import datetime
import config

app = Flask(__name__)
app.config.from_object(config)
db = SQLAlchemy(app)
api = Api(app)

class hello(Resource):
    def post(self):
        return { "data" : "hello post"}		#post 请求
    def get(self):
        return { "data" : "hello get"}		#get 请求
        
api.add_resource(hello, '/')
migrate = Migrate(app, db)

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.