鸿蒙 HarmonyOS4.0 Http数据请求封装详解

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 {
   //定义一个后台请求的基地址
   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)
   }
 }