鸿蒙next RCP网络请求工具类进阶版来了

前言：

各位同学大家好，有一段时间没有更新文章了,最近因为鸿蒙官方的网络请求换掉了了rcp 之前是使用http 这些都是原生开发的 当然有那种三方大家熟知的 axios (这个也是基于http 后面也会过时)所以大家还是要了解一下rcp的原生的网络请求的。那么我们不废话正式开始。

具体实现

这里我们主要讲究get 请求和post 请求 其他的还有put 请求和delete 请求用得相对较少有兴趣的同学可以查阅我们的官网的文档即可。

• 定义get 请求方法

export  function   rcpGet<T>(url:string,params?:string): Promise<T|null>{
  return rcpRequest(url,"GET",params);
}

• 定义post请求方法

export  function   rcpPost<T>(url:string,params?:string): Promise<T|null>{
  return rcpRequest(url,"POST",params);
}

• 声明请求头

  let headers: rcp.RequestHeaders = {
    'accept': 'application/json'
  };

• 创建 session实例

let session = rcp.createSession();

• 创建 Request 实例

 let req = new rcp.Request(url,method,headers ,params);

• 定义泛型返回

let  getjson:T|null=null;

• 发起请求并获取服务器响应数据

 return session.fetch(req).then((response) => {
    Logger.error(`Request succeeded, message is ${JSON.stringify(response)}`);
    if(response.statusCode===200){
        Logger.error("请求成功");
        let result= `${JSON.stringify(response)}`;
        Logger.error("请求返回数据",result);
        getjson=JSON.parse(result) as T;
      }else {
       getjson=null;
     }
     return getjson;
  }).catch((err: BusinessError) => {
   Logger.error(`err: err code is ${err.code}, err message is ${JSON.stringify(err)}`);
    return null;
  });

完整代码

import { BusinessError } from '@kit.BasicServicesKit';
import { rcp } from '@kit.RemoteCommunicationKit';
import Logger from './Logger';

export  function   rcpGet<T>(url:string,params?:string): Promise<T|null>{
  return rcpRequest(url,"GET",params);
}
export  function   rcpPost<T>(url:string,params?:string): Promise<T|null>{
  return rcpRequest(url,"POST",params);
}


function  rcpRequest<T>(url:string ,method:string,params?:string): Promise<T|null>{
  let headers: rcp.RequestHeaders = {
    'accept': 'application/json'
  };
  let session = rcp.createSession();
  let req = new rcp.Request(url,method,headers ,params);
  let  getjson:T|null=null;
 return session.fetch(req).then((response) => {
    Logger.error(`Request succeeded, message is ${JSON.stringify(response)}`);
    if(response.statusCode===200){
        Logger.error("请求成功");
        let result= `${JSON.stringify(response)}`;
        Logger.error("请求返回数据",result);
        getjson=JSON.parse(result) as T;
      }else {
       getjson=null;
     }
     return getjson;
  }).catch((err: BusinessError) => {
   Logger.error(`err: err code is ${err.code}, err message is ${JSON.stringify(err)}`);
    return null;
  });


}

具体在页面中调用

• get 请求不使用then回调

   let res=await rcpGet<PositionModel>(this.url);
   if(res?.code==200){
     this.positionlist=res?.data;
   }else {

   }

• get请求使用then回调

 await rcpGet<PositionModel>(this.url).then((data)=>{
     if(data?.code==200){
       this.positionlist=data?.data;
     }else {

     }
   });

• post请求

let modifiedContent: UserInfo = {
     'username': '186740353353',
     'password':'123456'
   };

 await rcpPost<RegisterModel>(this.registerurl,JSON.stringify(modifiedContent)).then((data)=>{
   if(data?.code==200){
         let registerModelUser:RegisterModelUser|undefined|null=data?.user;
      }else {

   }
 });

• 具体调用效果

我们通过日志截图里面的数据我们无论是用post或者get 都可以顺利请求到我们服务器的数据,并且我们定义了返回类型是泛型 我们在拿到服务器返回的数据的时候我们就直接解析调数据将json 解析格式化成为我们的model (class 或者 interface都可以 ) 我们在view层只需要直接获取我们的model里面属性即可

最后总结：

鸿蒙next 里面rcp 网络请求相对比较简单，但是这里只是简单提到了用法 ,例如还有拦截器还有请求数据超时时间我也没有设置，还有请求头参入其他外部参数也没有暴漏出去,这些希望同学们可以自己去完善 老师这边只是提供一个基本的思路，今天的文章就讲到这里有兴趣的同学可以拿老师代码去优化修改， 今天的文章就讲到这里有兴趣的 关注我B站教程 了解更多鸿蒙开发的知识 可以关注坚果派公众号 。 谢谢

课程地址

www.bilibili.com/cheese/play…

项目内容:

• 1 常用布局组件的学习

• 2 网络请求工具类封装

• 3 arkui 生命周期启动流程

• 4 日志工具类的封装

• 5 自定义组合组件的封装

• 6 路由导航跳转的使用

• 7 本地地数据的缓存 以及缓存工具类的封装

• 8 欢迎页面的实现

• 9 登录案例和自动登录效果实现

• 10 请求网络数据分页上拉加载 下拉刷新的实现

• 11 list数据懒加载实现

• 12 webview组件的使用

如果使用更多好用的鸿蒙next三方库

友情链接

harmony-utils 一款功能丰富且极易上手的HarmonyOS工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用，能够满足各种不同的开发需求。

harmony-dialog 一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。