Openharmony eTS 之 Http Post請求

作者：yukoyu 2022-07-12 17:03:43

Httpclient以人們耳熟能詳的OKHTTP為基礎，整合Android-async-http，AutobahnAndroid，OkGo等庫的功能特性，致力于在OpenHarmony 打造一款高效易用，功能全面的網絡請求庫。

??https://ost.51cto.com??

前言

Httpclient以人們耳熟能詳的OKHTTP為基礎，整合Android-async-http，AutobahnAndroid，OkGo等庫的功能特性，致力于在OpenHarmony 打造一款高效易用，功能全面的網絡請求庫。當前版本的httpclient依托系統提供的網絡請求能力和上傳下載能力！

一、安裝HttpClient

1、打開第三方組件庫

https://repo.harmonyos.com/#/cn/application/atomService?q=http%20keyword%3AOpenHarmony

2、找到我們需要的httpclient

#夏日挑戰賽# openharmony eTS之http post請求-開源基礎軟件社區

3、安裝

代碼：

npm install @ohos/httpclient --save

#夏日挑戰賽# openharmony eTS之http post請求-開源基礎軟件社區

二、添加權限

添加權限參考這文章： https://ost.51cto.com/posts/13219。

#夏日挑戰賽# openharmony eTS之http post請求-開源基礎軟件社區

三、編寫代碼

1、eTS代碼

import httpclient from '@ohos/httpclient';
import TimeUnit from '@ohos/httpclient'
let httpClientImpl = new httpclient.HttpClient.Builder().setConnectTimeout(15, TimeUnit.TimeUnit.SECONDS).setReadTimeout(15, TimeUnit.TimeUnit.SECONDS).build();
@Entry
@Component
struct Index {
  @State message: string = 'post 測試';
  @State srtbutton: string = '';
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text(this.srtbutton)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {    //按鈕控件
          Text('點擊')
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .margin({
          top: 200
        })
        .width('50%')
        .height('10%')
        .backgroundColor('#0D9FFB')
        .onClick(() => {    //點擊事件
          let body = {  //帶參數
             "data": "hi!",
          };
          let requestBody = httpclient.RequestBody.create(JSON.stringify(body));
          let request = new httpclient.Request.Builder()
            .url("http://192.168.0.141:5000/")
            .method('POST')
            .body(requestBody)
            .addHeader("Content-Type", "application/json")
            .params("token", "yukoyu")
            .build();
          httpClientImpl.newCall(request).enqueue((result) => {
            console.log("success: " + JSON.stringify(result))
            this.srtbutton = JSON.stringify(result.data)
          }, (error) => {
            console.log("error: " + JSON.stringify(error))
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2、服務器接口代碼

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):
        data = json.loads(request.get_data())
        print(data)
        return { "data" : "hello post"}
    def get(self):
        return { "data" : "hello get"}
api.add_resource(hello, '/')
migrate = Migrate(app, db)