鸿蒙~Http数据请求 和服务端通信(一) ： 自定义http请

一 web server 端 ：

采用go语言 ，gin框架

package main

import (
    "github.com/gin-gonic/gin"
    "log"
)

func main() {
    r := gin.Default()
    r.GET("/user", func(context *gin.Context) {
        //map 数组
        context.JSON(200, gin.H{
            "name":  "鸿蒙开发测试",
            "title": "beijing",
        })
    })
    err := r.Run(": 8080")
    if err != nil {
        log.Fatalln(err.Error())
    }
}

二 鸿蒙端

微信图片_20231227220056.png

• 1、 网络请求 HttpUtil.ets 文件

import { ResponseResult, UserInfo } from '../viewmodel/UserViewModel';
import http from '@ohos.net.http';

export function httpRequest(url: string): Promise<ResponseResult> {
  let httpRequest = http.createHttp();

  let responseResult = httpRequest.request(url, {
    method: http.RequestMethod.GET,
    readTimeout: 10000,
    header:{
      'Content-Type': 'application/json'
    },
    connectTimeout: 10000,
    extraData: {}
  });

  let serverData: ResponseResult = new ResponseResult();

  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === 200) {
      console.info("huxiubo", `response:${JSON.stringify(value)}`);
      let result = `${value.result}`;
      let resultJson: UserInfo = JSON.parse(result);

      serverData.code = 200
      serverData.type = 0
      serverData.data = resultJson
    } else {

      serverData.data = `Failed`;
    }
    return serverData;
  }).catch(() => {
    serverData.data = "error"
    return serverData;
  })

}

• 2、viewModel 层 UserViewModel.ets

import { httpRequest } from '../common/HttpUtil';

const TAG = "huxiubo"
export class UserViewModel {
  getUserInfo() : Promise<UserInfo> {
    return new Promise((resolve: Function) => {
       let url = "http://192.168.0.169:8080/user"
       httpRequest(url)
         .then((data: ResponseResult) => {
            if (data.code === 200) {
              console.info(TAG, `200: ${data.data} `);
              resolve(data.data)
            } else {
               console.info(TAG, `failed else `);
            }
         })
         .catch((err) => {
           console.info(TAG, `catch failed :${JSON.stringify(err)}}`);
         })
     }
    )
  }
}


export class UserInfo {
  title: string = ""
  name: string = ""
  // age: number = 0
  // imageUrl : string = ""
}

export class ResponseResult {
  code : number;
  type: number;
  data : string | Object | ArrayBuffer;

  constructor() {
    this.code = -1
    this.type = -1
    this.data = null
  }

}

let userViewModel = new UserViewModel();
export default userViewModel as UserViewModel;

• 3、view层 请求 ChildLayout.ets

import userViewModel, { UserInfo } from '../viewmodel/UserViewModel'

@Component
export struct ChildView {
  @State userInfo:UserInfo = new UserInfo();
  aboutToAppear() {
    console.info("huxiubo", `aboutToAppear====`);

    userViewModel.getUserInfo().then((info: UserInfo) => {
      console.info("huxiubo", `aboutToAppear++++++ :${info}`);
      console.info('huxiubo', `200: ${info.title} `);
      //
      this.userInfo = info
    })
      .catch((err) => {
        console.info("huxiubo", `err :${JSON.stringify(err)}`);

      })
  }
  build() {
    Column() {
      Text(`title:${this.userInfo.title}`)
      Text(`name:${this.userInfo.name}`)
    }
    .size({width: '100%', height: '100%'})
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}

• 4、UI入口

import { ChildView } from '../view/ChildLayout'

@Entry
@Component
struct Index {
  build() {
    Row() {
       ChildView()
    }
    .width('100%')
    .height('100%')
  }
}