##鸿蒙核心技术##HarmonyOS SDK应用服务##RCP(远场通信)#

鸿蒙中网咯请求大约有三种方式：1.原生的HTTP请求，2.axios库，3.rcp远场通信

三种方式各有好坏，不过用的最多的应该还是axios，因为前端的网络请求可能基本都是axios，本文着重介绍鸿蒙原生的rcp远场通信

在开始前我们先做准备工作

新建一个baseUrl文件，如下：

如果是预览器中间的10.0.2.2可以写成127.0.0.1,用模拟器则是10.0.2.2，如果用真机的话可以写成同一网络下的ip地址

在module中配置网络权限：

1.get请求

定义get请求的返回的数据类型

代码如下：

export interface getReturnModel {
	code: number;
	message: string;
	data: GetReturnModelData[];
}
export interface GetReturnModelData {
	id: number;
	name: string;
}

定义一个rcp请求的会话

    const session=rcp.createSession()

完整函数如下：

  rcpGet=()=>{
    const session=rcp.createSession()
    session.get(rcpBaseUrl).then((res:rcp.Response)=>{
      // this.showList=(JSON.parse(JSON.stringify(res)) as getReturnModel).data
      console.log("res",JSON.stringify(res))
    }).catch((err:BusinessError)=>{
      console.log("err",JSON.stringify(err))
    })
  }

完整页面如下：

import { rcp } from '@kit.RemoteCommunicationKit';
import { rcpBaseUrl } from '../rcpBaseUrl/rcpBaseUrl';
import { BusinessError } from '@kit.BasicServicesKit';
import { getReturnModel, GetReturnModelData } from '../Model/getReturnModel';

@Entry
@Component
struct RCPGetPage {
  @State message: string = 'Hello World';
  @State showList:GetReturnModelData[]=[]
  rcpGet=()=>{
    const session=rcp.createSession()
    session.get(rcpBaseUrl).then((res:rcp.Response)=>{
      // this.showList=(JSON.parse(JSON.stringify(res)) as getReturnModel).data
      console.log("res",JSON.stringify(res))
    }).catch((err:BusinessError)=>{
      console.log("err",JSON.stringify(err))
    })
  }

  build() {
    Column() {
      Button("get请求")
        .onClick(() => {
          this.rcpGet()
        })
    }
    .height('100%')
    .width('100%')
  }
}

启动模拟器后，点击按钮的输出：

表示get请求成功

现在让我们把请求的数据渲染到页面上

完整代码如下：

import { rcp } from '@kit.RemoteCommunicationKit';
import { rcpBaseUrl } from '../rcpBaseUrl/rcpBaseUrl';
import { BusinessError } from '@kit.BasicServicesKit';
import { getReturnModel, GetReturnModelData } from '../Model/getReturnModel';

@Entry
@Component
struct RCPGetPage {
  @State message: string = 'Hello World';
  @State showList:GetReturnModelData[]=[]
  rcpGet=()=>{
    const session=rcp.createSession()
    session.get(rcpBaseUrl).then((res:rcp.Response)=>{
      this.showList=(JSON.parse(JSON.stringify(res)) as getReturnModel).data
      console.log("res",JSON.stringify(res))
    }).catch((err:BusinessError)=>{
      console.log("err",JSON.stringify(err))
    })
  }

  build() {
    Column() {
      Button("get请求")
        .onClick(() => {
          this.rcpGet()
        })
      ForEach(this.showList,(item:GetReturnModelData,index: number)=>{
        Row(){
          Text("id")
          Blank().width(40)
          Text(item.id.toString())
          Blank().width(50)
          Text("name")
          Blank().width(40)
          Text(item.name)
        }
      },(item:GetReturnModelData)=>JSON.stringify(item))
    }
    .height('100%')
    .width('100%')
  }
}

在模拟器中点击get请求按钮：

效果如下：

同时后端日志输出：

下面来看post请求

2.post请求

首先：定义请求的body类型

代码如下：

export interface postBodyModel{
  name:string
}

然后定义请求的函数：

  rcpPost = (name: string) => {
    const session = rcp.createSession()
    session.post(rcpBaseUrl, { name } as postBodyModel).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }

整个页面代码为：

import { rcp } from '@kit.RemoteCommunicationKit';
import { rcpBaseUrl } from '../rcpBaseUrl/rcpBaseUrl';
import { BusinessError } from '@kit.BasicServicesKit';
import { getReturnModel, GetReturnModelData } from '../Model/getReturnModel';
import { postBodyModel } from '../Model/postBodyModel';

@Entry
@Component
struct RCPGetPage {
  @State message: string = 'Hello World';
  @State showList: GetReturnModelData[] = []
  @State postName: string = ""
  rcpGet = () => {
    const session = rcp.createSession()
    session.get(rcpBaseUrl).then((res: rcp.Response) => {
      this.showList = (JSON.parse(JSON.stringify(res)) as getReturnModel).data
      console.log("res", JSON.stringify(res))
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }
  rcpPost = (name: string) => {
    const session = rcp.createSession()
    session.post(rcpBaseUrl, { name } as postBodyModel).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }

  build() {
    Column() {
      Button("get请求")
        .onClick(() => {
          this.rcpGet()
        })
      ForEach(this.showList, (item: GetReturnModelData, index: number) => {
        Row() {
          Text("id")
          Blank().width(40)
          Text(item.id.toString())
          Blank().width(50)
          Text("name")
          Blank().width(40)
          Text(item.name)
        }
      }, (item: GetReturnModelData) => JSON.stringify(item))

      Line()
      TextInput({ placeholder: "请输入post的名字", text: $$this.postName })
      Button("post请求").onClick(() => {
        this.rcpPost(this.postName)
      })
    }
    .height('100%')
    .width('100%')
  }
}

在输入框输入1，点击post请求的按钮的控制台输出结果：

说明post成功

之后我们点击get请求的按钮，查看页面：

发现有我们刚刚post的1，并且id自增长

3.put请求

首先定义put的body的数据类的：

代码如下：

export interface putBodyModel{
  id:number|string,
  name:string
}

然后定义put的函数

  rcpPut=(data:putBodyModel)=>{
    const session=rcp.createSession()
    session.put(rcpBaseUrl,data).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }

最后整个页面的代码如下：

import { rcp } from '@kit.RemoteCommunicationKit';
import { rcpBaseUrl } from '../rcpBaseUrl/rcpBaseUrl';
import { BusinessError } from '@kit.BasicServicesKit';
import { getReturnModel, GetReturnModelData } from '../Model/getReturnModel';
import { postBodyModel } from '../Model/postBodyModel';
import { putBodyModel } from '../Model/putBodyModel';

@Entry
@Component
struct RCPGetPage {
  @State message: string = 'Hello World';
  @State showList: GetReturnModelData[] = []
  @State postName: string = ""
  @State putId:string=""
  @State putData:string=""
  rcpGet = () => {
    const session = rcp.createSession()
    session.get(rcpBaseUrl).then((res: rcp.Response) => {
      this.showList = (JSON.parse(JSON.stringify(res)) as getReturnModel).data
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }
  rcpPost = (name: string) => {
    const session = rcp.createSession()
    session.post(rcpBaseUrl, { name } as postBodyModel).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }
  rcpPut=(data:putBodyModel)=>{
    const session=rcp.createSession()
    session.put(rcpBaseUrl,data).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }

  build() {
    Column() {
      Button("get请求")
        .onClick(() => {
          this.rcpGet()
        })
      ForEach(this.showList, (item: GetReturnModelData, index: number) => {
        Row() {
          Text("id")
          Blank().width(40)
          Text(item.id.toString())
          Blank().width(50)
          Text("name")
          Blank().width(40)
          Text(item.name)
        }
      }, (item: GetReturnModelData) => JSON.stringify(item))

      Divider().height(5).width("100%")
      TextInput({ placeholder: "请输入post的名字", text: $$this.postName })
      Button("post请求").onClick(() => {
        this.rcpPost(this.postName)
      })
      Divider().height(5).width("100%")
      TextInput({placeholder:"请输入put的id",text:$$this.putId})
      TextInput({placeholder:"请输入put的名字",text:$$this.putData})
      Button("put请求").onClick(()=>{
        this.rcpPut({id:this.putId,name:this.putData})
      })
    }
    .height('100%')
    .width('100%')
  }
}

现在我们在id输入框中输入8，data输入2，

那么就是：

然后点击put请求的按钮，发现控制台输出

说明修改成功

然后我们点击get请求，查看数据

发现确实修改成功

4.delete请求

请求体数据类型：

代码如下：

export interface deleteBodyModel {
  id: string | number
}

请求函数：

由于delete不支持在body中配置参数，因此采用fetch的方式

  rcpDelete=(data?:deleteBodyModel)=>{
    const request = new rcp.Request(`${rcpBaseUrl}`, "DELETE", {
      "Content-Type": "application/json"
    }, data);
    const session=rcp.createSession()
    session.fetch(request).then((res: rcp.Response) => {
      console.log("header",JSON.stringify(res.headers))
      console.log("body",JSON.stringify(res.body))
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
}

整体页面代码如下：

import { rcp } from '@kit.RemoteCommunicationKit';
import { rcpBaseUrl } from '../rcpBaseUrl/rcpBaseUrl';
import { BusinessError } from '@kit.BasicServicesKit';
import { getReturnModel, GetReturnModelData } from '../Model/getReturnModel';
import { postBodyModel } from '../Model/postBodyModel';
import { putBodyModel } from '../Model/putBodyModel';
import { deleteBodyModel } from '../Model/deleteBodyModel';

@Entry
@Component
struct RCPGetPage {
  @State message: string = 'Hello World';
  @State showList: GetReturnModelData[] = []
  @State postName: string = ""
  @State putId:string=""
  @State putData:string=""
  @State deleteId:string=""
  rcpGet = () => {
    const session = rcp.createSession()
    session.get(rcpBaseUrl).then((res: rcp.Response) => {
      this.showList = (JSON.parse(JSON.stringify(res)) as getReturnModel).data
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }
  rcpPost = (name: string) => {
    const session = rcp.createSession()
    session.post(rcpBaseUrl, { name } as postBodyModel).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }
  rcpPut=(data:putBodyModel)=>{
    const session=rcp.createSession()
    session.put(rcpBaseUrl,data).then((res: rcp.Response) => {
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
  }
  rcpDelete=(data?:deleteBodyModel)=>{
    const request = new rcp.Request(`${rcpBaseUrl}`, "DELETE", {
      "Content-Type": "application/json"
    }, data);
    const session=rcp.createSession()
    session.fetch(request).then((res: rcp.Response) => {
      console.log("header",JSON.stringify(res.headers))
      console.log("body",JSON.stringify(res.body))
      console.log("res", JSON.stringify(res))
      session.close()
    }).catch((err: BusinessError) => {
      console.log("err", JSON.stringify(err))
    })
}

  build() {
    Column() {
      Button("get请求")
        .onClick(() => {
          this.rcpGet()
        })
      ForEach(this.showList, (item: GetReturnModelData, index: number) => {
        Row() {
          Text("id")
          Blank().width(40)
          Text(item.id.toString())
          Blank().width(50)
          Text("name")
          Blank().width(40)
          Text(item.name)
        }
      }, (item: GetReturnModelData) => JSON.stringify(item))

      Divider().height(5).width("100%")
      TextInput({ placeholder: "请输入post的名字", text: $$this.postName })
      Button("post请求").onClick(() => {
        this.rcpPost(this.postName)
      })
      Divider().height(5).width("100%")
      TextInput({placeholder:"请输入put的id",text:$$this.putId})
      TextInput({placeholder:"请输入put的名字",text:$$this.putData})
      Button("put请求").onClick(()=>{
        this.rcpPut({id:this.putId,name:this.putData})
      })
      Divider().height(5).width("100%")
      TextInput({placeholder:"请输入删除的id",text:$$this.deleteId})
      Button("delete请求").onClick(()=>{
        this.rcpDelete({id:this.deleteId})
      })
    }
    .height('100%')
    .width('100%')
  }
}

现在在输入框中输入8，然后点击按钮：

控制台输出结果如下：

然后点击get请求查看数据源

发现id为8的数据已被成功删除

rcp的拦截器将在下一篇文章中解释

# harmonyos # 华为 # 网络
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【鸿蒙实战】ToolMaster：基于 HarmonyOS NEXT 的纯离线隐私优先开发者工具箱

avatar HarmonyOS开发者社区

鸿蒙隔空传送：一抓一放，内容就到了对面的设备上

鸿蒙系统推出的隔空传送功能通过"抓取-释放"手势实现跨设备文件传输，开发者需在应用页面注册监听并处理分享数据。该功能与隔空截屏共用触发手势，系统根据开关组合决定具体行为。开发接入需注意三点：及时响应手势回调（3秒内完成）、严格管理生命周期监听、正确处理设备间信任机制。同账号设备传输无需确认，不同账号需双向验证并1小时内有效。该功能结合App Linking可实现"传送

avatar HarmonyOS开发者社区
cover

鸿蒙6.0应用开发——自定义键盘的实现

avatar HarmonyOS开发者社区