HarmonyOS http 请求封装

步骤

1、定义响应数据格式

2、封装数据请求

3、将各种请求进行模块划分

4、请求示例

项目目录

1、定义响应数据格式

export default class  Response {
  /**
   * 响应码
   */
  code:number
  /**
   * 响应消息
   */
  message:string
  /**
   * 响应数据
   */
  data:any
}

2、封装数据请求

提示：具体更详细的配置请参考官网

import http from '@ohos.net.http';
//导入预定好的数据响应格式
import Response from '../utils/Response'

//导出去一个请求函数，这样开发者就可以像axios一样的风格请求数据
export function request(url:string,method: http.RequestMethod,data?:any): Promise<Response> {
  //定义一个后台请求的基地址
  const BASE_URL =  "http://localhost:9600"
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request( BASE_URL+ url,{
    method: method,
    // header: {
    //   'Content-Type': 'application/json'
    // },
    //携带额外参数
    extraData: JSON.stringify(data),
    // 可选，指定返回数据的类型
    // expectDataType: http.HttpDataType.STRING,
    // 可选，默认为true
    // usingCache: true,
    // 可选，默认为1
    // priority: 1,
    // 可选，默认为60000ms
    // connectTimeout: 60000,
    // readTimeout: 60000,
    // 可选，协议类型默认值由系统自动指定
    // usingProtocol: http.HttpProtocol.HTTP1_1,
  });

  let response = new Response();
  // 处理数据，并返回
  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === 200) {
      // 获取返回数据,将返回的json数据解析成事先预定好的响应格式
      // 这里建议和后端的保持一致
      let res: Response = JSON.parse(`${value.result}`);
      response.data = res.data;
      response.code = res.code;
      response.message = res.message;
    } else {
      response.message = '请求错误';
      response.code = 400;
    }
    return response;
  }).catch(() => {
    response.message = '请求错误';
    response.code = 400;
    return response;
  });
}

3、将各种请求进行模块划分

熟悉vue开发的同学都知道我们不同模块的请求一般放在api目录下进行划分

如下以请求用户User模块为示例

import http from '@ohos.net.http';
//导入封装好的请求
import { request } from '../utils/request'

/**
 * 根据用户id请求用户数据
 * @param userId
 * @returns
 */
export function getUserById(userId) {
  return request(`/user/get/${userId}`,http.RequestMethod.GET)
}

/**
 * 请求用户数据
 * @param userId
 * @returns
 */
export function getUser() {
  return request('/user/get',http.RequestMethod.GET)
}

/**
 * 用户数据保存
 * @param userId
 * @returns
 */
export function save(data) {
  return request(`/user/save`,http.RequestMethod.POST,data)
}

4、附上一个请求示例

这里提前一个用户对象用于接收数据时使用

export default class User {
  username:string
  password:string
}

//导入api下的User模块：请求方法
import {getUser,save,getUserById} from '../api/user'
//导入定义好的用户对象
import User from '../model/User'

@Entry
@Component
struct Index {
  @State user:User = {
    username: '',
    password: ''
  }

    //组件展示前进行数据的一个请求
  aboutToAppear() {
    //根据用户id进行的一个请求
    getUserById(1).then(res => {
      if(res.code === 200){
        this.user = res.data
      }
    })
    //不携带参数的一个请求
    getUser().then(res => {
      if(res.code === 200){
        this.user = res.data
      }
    })
  }

  build() {
    Row() {
      Column() {
        Text(this.user.username)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Text(this.user.password)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)

        Divider()
        TextInput().margin({ top: 20 })
          .onChange((value: string) => {
            this.user.username = value
          })
        TextInput().type(InputType.Password).margin({ top: 20 })
          .onChange((value: string) => {
            this.user.password = value
          })
        Button('登录').width(150).margin({ top: 20 })
          .onClick(()=> {
            console.log("发送成功")
            //保存用户数据的一个请求
            save(this.user)
          })
      }
      .width('100%')
      .height('100%')
      .padding({top: 50})
    }
    .height('100%')
    .width('100%')
    .alignItems(VerticalAlign.Top)
  }
}