HarmonyOS鸿蒙ArkTS/ArkUI项目，封装http网络请求，封装公共API以及调用请求的过程实现。_arkts api类

我们在日常当中开发鸿蒙项目的时候，调用@ohos.net.http (数据请求)方法去请求接口，整个组件的语法糖会很繁琐，我们对@ohos.net.http (数据请求)方法进行一下二次公共API接口封装http网络请求，实现接口的简单方便快捷的调用。

一、封装api.ets，将常用的post、get、put、delete请求进行封装。

// api.ets文件
const BASE_URL: string = 'http://120.46.58.55';//这里写接口地址
import http from '@ohos.net.http';

export function httpRequestDel(url: string) {
  url = BASE_URL+url
  let httpRequest = http.createHttp();
  var header = {
    'Content-Type': 'application/json',
  }
  let responseResult = httpRequest.request(url, {
    method: http.RequestMethod.DELETE,
    header: header
  });
  return responseResult
}


export function httpRequestPut(url: string, params: any) {
  url = BASE_URL+url
  let httpRequest = http.createHttp();
  var header = {
    'Content-Type': 'application/json',
  }
  let responseResult = httpRequest.request(url, {
    method: http.RequestMethod.PUT,
    extraData: params,
    header: header
  });
  return responseResult
}


export function httpRequestPost(url: string, params: any) {
  url = BASE_URL+url
  let httpRequest = http.createHttp();
  var header = {
    'Accept': '*/*',
    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
  };
  let responseResult=httpRequest.request(url, {
    method: http.RequestMethod.POST,
    extraData: params,
    header: header
  });
  return responseResult
}

export function httpRequestGet(url: string,query: any) {
  url = BASE_URL+url+query
  let httpRequest = http.createHttp();
  var header = {
    'Content-Type': 'application/json',
  }
  let responseResult = httpRequest.request(url, {
    method: http.RequestMethod.GET,
    header: header
  });
  return responseResult
}
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
60

二、请求调用封装的公共接口api.ets

// @ts-nocheck
import {httpRequestPost} from './api/api';
import Url from '@ohos.url'

@Entry
@Component
struct Login {
  @State username:string='';
  @State password:string='';

  build() {
    Column() {
      // header();
      TextInput({ placeholder: '请输入账号',text:this.username }).margin({ top: 20 })
        .onChange((value:string)=>{
          this.username=value;
        })
      TextInput({ placeholder: '请输入密码',text:this.password }).type(InputType.Password).margin({ top: 20 })
        .onChange((value:string)=>{
          this.password=value;
        })
      Button('登录')
        .width(200)
        .margin({ top: 20 })
        .backgroundColor('#ff832317')
        .onClick(()=>{
          //参数处理
          let body: Map<string, any> = new Map<string, any>();
          body.set("username", this.username)
          body.set("password", this.password)
          let param = new Url.URLParams(Object.fromEntries(body)).toString();
          //新封装方法测试
          let responseResult=httpRequestPost('/api/login3',param)
          responseResult.then((res)=>{
            if (res.responseCode=200) {
              let data:JSON=JSON.parse(res.result);
              console.info(res.responseCode);
              console.info(data);
            };
          }).catch((err)=>{
            console.log(err);
          });
        })
    }.padding(20)
  }
}
export default Login

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

本文原创，原创不易，如需转载，请联系作者授权。