当前位置：首页 > article >正文

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

article 2025/1/5 5:47:26

前言：

各位同学大家好，有一段时间没有更新文章了,最近因为鸿蒙官方的网络请求换掉了了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站教程了解更多鸿蒙开发的知识可以关注坚果派公众号。谢谢