鸿蒙开发-RCP网络请求

SiMoooooo

1115人浏览 · 2025-07-03 11:58:45

SiMoooooo · 2025-07-03 11:58:45 发布

前言

RCP是Remote Communication Kit远程通信服务提供的一种网络请求方式，它实际上是对http（HTTP 教程 | 菜鸟教程、HTTP_百度百科、维基百科）请求的一种封装，但是使用更加简单。
RCP请求包含FETCH（一种混合形式的请求）、GET、PUT、POST、DELETE等方式，下文将简要说明RCP的实现。

鸿蒙开发-Axios网络请求-CSDN博客文章浏览阅读134次。本文介绍了如何在鸿蒙(ArkTS)开发中使用第三方Axios库实现网络请求。主要内容包括：1. 申请网络权限配置；2. 安装@ohos/axios三方库；3. 搭建json-server测试服务器；4. 封装axios基础配置；5. 实现GET、POST、PUT、DELETE四种请求方式的完整示例代码。文章通过具体代码演示了网络请求的实现过程，包括参数传递、响应处理和错误捕获，为开发者提供了在鸿蒙应用中使用Axios的实践指导。所有示例均包含UI交互按钮，方便开发者快速测试验证网络请求功能。https://blog.csdn.net/weixin_58280240/article/details/149094264?spm=1011.2415.3001.5331

准备

新建相关文件和打开模拟器

新建一个空项目并在entry->src->main目录下新建service文件夹和rcpService.ets文件，如下所示：

同时，打开对应API的模拟器。

申请权限

在entry->src->main->module.json5中申请如下权限：

    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      }
    ]

建立测试用服务器和测试文件

安装json-server服务器

为了让新手也可以直接体会，我们用一个非常非常简单的服务器：json server。

1.在Node.js官网首页下载node.js和对应的npm：Node.js — 在任何地方运行 JavaScript（官网）

2.检测安装是否成功：

在“终端”运行

node -v
npm -v

如果可以正常显示它们的版本，那么就说明正常安装。

3.安装完毕之后，使用以下代码安装json server服务器：

npm install -g json-server

配置json server服务器

先创建一个简单的json文件（用记事本）：这个文件格式出错一点都会导致后续失败

{
  "data": [
    {
      "id": "1",
      "text": "你好"
    },
    {
      "id": "2",
      "text": "世界"
    }
  ]
}

保存为aaa.json

然后在终端中启动服务器及其包含文件：

打开“终端”，输入以下命令：

1.跳转至文件保存目录，如：
cd E:\json\harmony
2. 输入以下命令，启动服务器并将该文件作为服务器中文件
json-server --watch aaa.json

至此，服务开启完毕，如果不确定可不可，可以将最后一行的链接贴到浏览器中查看，如果可以访问就是正确的。

网络请求实例

FETCH请求

FETCH请求是一种混合多种请求方式的请求，它需要显示声明所用请求方式。

GET

import { rcp } from '@kit.RemoteCommunicationKit'
import { BusinessError } from '@kit.BasicServicesKit';
import { url } from '@kit.ArkTS';
//基础url
const basicUrl='http://10.0.2.2:3000/aaa'


export function fetchGetByRcp(){
  //这里是设置参数（显式）
  let params = new url.URLParams({
    id:"1"
  });
  //拼接参数
  const netAddr=basicUrl.concat('?'+params.toString());
  //指明请求方式和路径
  const request=new rcp.Request(netAddr, 'GET');
  //创建会话
  const session = rcp.createSession();
  //发起请求  
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`数据获取成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`获取失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

在Index中写明调用该请求方式：

import { fetchByRcp as fetchDataByRcp } from '../../service/rcpService';

@Entry
@Component
struct Index {
  build() {
    Column({space:10}) {
      Button('FETCH-GET获取数据')
        .width('80%')
        .height(40)
        .onClick(()=>{
          fetchGetByRcp()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

点击按钮，获取数据成功：

POST

rcpService文件添加如下代码：

export function fetchPostByRcp(){
  //添加的内容
  const content:rcp.RequestContent={
    id:"3",
    text:"测试数据"
  }
  //请求方式后面的第一个是请求头header，第二次才是内容，所以要这么写
  const request=new rcp.Request(basicUrl, 'POST', undefined, content);
  //发起会话
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`数据添加成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`添加失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('FETCH-POST添加数据获取')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchPostByRcp()
        })

点击按钮，添加成功：

PUT

rcpService文件添加如下代码：

export function fetchPutByRcp(){
  //修改数据
  const content:rcp.RequestContent={
    id:"3",
    text:"新测试数据"
  }
  //设置请求配置
  const request=new rcp.Request(basicUrl+"/3", 'PUT', undefined, content);
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`数据修改成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`修改失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('FETCH-PUT修改数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchPutByRcp()
        })

点击按钮，修改成功：

DELETE

rcpService文件添加如下代码：

export function fetchDeleteByRcp(){
  const request=new rcp.Request(basicUrl+"/3", 'DELETE');
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`删除数据成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`删除失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('FETCH-DELETE删除数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchDeleteByRcp()
        })

点击按钮，删除成功：

GET请求

rcpService文件添加如下代码：

export function getByRcp(){
  let params = new url.URLParams({
    id:"1"
  });
  const netAddr=basicUrl.concat('?'+params.toString());
  const session = rcp.createSession();
  //不同于fetch，他不用额外去写一行配置了，但是事实上，它的灵活性相较于fetch也更低了，不好设置更多的配置，下同，不再赘述
  session.get(netAddr).then((rep: rcp.Response) => {
    console.info(`数据获取成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`获取失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('GET获取数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          getByRcp()
        })

点击按钮，获取数据成功：

POST请求

rcpService文件添加如下代码：

export function postByRcp(){
  const session = rcp.createSession();
  session.post(basicUrl,{
    id:"3",
    text:"测试数据"
  }).then((rep: rcp.Response) => {
    console.info(`数据添加成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`添加失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('Post获取数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          postByRcp()
        })

点击按钮，添加数据成功：

PUT请求

rcpService文件添加如下代码：

export function putByRcp(){
  const session = rcp.createSession();
  session.put(basicUrl+"/3",{
    id:"3",
    text:"新测试数据"
  }).then((rep: rcp.Response) => {
    console.info(`数据修改成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`修改失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('Put修改数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          putByRcp()
        })

点击按钮，数据修改成功：

DELETE请求

rcpService文件添加如下代码：

export function deleteByRcp(){
  const session = rcp.createSession();
  session.delete(basicUrl+"/3").then((rep: rcp.Response) => {
    console.info(`数据删除成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`删除失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index文件的Column下添加如下代码：

      Button('Delete修改数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          deleteByRcp()
        })

点击按钮，删除成功：

总代码

rcpService.ets

//rcpService.ets
import { rcp } from '@kit.RemoteCommunicationKit'
import { BusinessError } from '@kit.BasicServicesKit';
import { url } from '@kit.ArkTS';

const basicUrl='http://10.0.2.2:3000/data'


export function fetchGetByRcp(){
  let params = new url.URLParams({
    id:"1"
  });
  const netAddr=basicUrl.concat('?'+params.toString());
  const request=new rcp.Request(netAddr, 'GET');
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`数据获取成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`获取失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function fetchPostByRcp(){
  const content:rcp.RequestContent={
    id:"3",
    text:"测试数据"
  }
  const request=new rcp.Request(basicUrl, 'POST', undefined, content);
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`数据添加成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`添加失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function fetchPutByRcp(){
  const content:rcp.RequestContent={
    id:"3",
    text:"新测试数据"
  }
  const request=new rcp.Request(basicUrl+"/3", 'PUT', undefined, content);
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`数据修改成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`修改失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function fetchDeleteByRcp(){
  const request=new rcp.Request(basicUrl+"/3", 'DELETE');
  const session = rcp.createSession();
  session.fetch(request).then((rep: rcp.Response) => {
    console.info(`删除数据成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`删除失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function getByRcp(){
  let params = new url.URLParams({
    id:"1"
  });
  const netAddr=basicUrl.concat('?'+params.toString());

  const session = rcp.createSession();
  session.get(netAddr).then((rep: rcp.Response) => {
    console.info(`数据获取成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`获取失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function postByRcp(){
  const session = rcp.createSession();
  session.post(basicUrl,{
    id:"3",
    text:"测试数据"
  }).then((rep: rcp.Response) => {
    console.info(`数据添加成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`添加失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function putByRcp(){
  const session = rcp.createSession();
  session.put(basicUrl+"/3",{
    id:"3",
    text:"新测试数据"
  }).then((rep: rcp.Response) => {
    console.info(`数据修改成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`修改失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

export function deleteByRcp(){
  const session = rcp.createSession();
  session.delete(basicUrl+"/3").then((rep: rcp.Response) => {
    console.info(`数据删除成功: ${rep}`);
  }).catch((err: BusinessError) => {
    // 错误处理，通过catch块，捕获error，并对error进行处理，本示例中会将错误信息展现到打印台上。
    console.error(`删除失败: Code is ${JSON.stringify(err.code)}, message is ${JSON.stringify(err)}`);
  });
}

Index.ets

import {
  deleteByRcp,
  fetchDeleteByRcp,
  fetchGetByRcp as fetchGetByRcp, fetchPostByRcp, fetchPutByRcp,
  getByRcp,
  postByRcp,
  putByRcp} from '../../service/rcpService';

@Entry
@Component
struct Index {
  build() {
    Column({space:10}) {
      Button('FETCH-GET获取数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchGetByRcp()
        })
      Button('FETCH-POST添加数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchPostByRcp()
        })
      Button('FETCH-PUT修改数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchPutByRcp()
        })
      Button('FETCH-DELETE删除数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          fetchDeleteByRcp()
        })
      Button('GET获取数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          getByRcp()
        })
      Button('Post获取数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          postByRcp()
        })
      Button('Put修改数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          putByRcp()
        })
      Button('Delete修改数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          deleteByRcp()
        })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

总结

相比于直接使用http请求，rcp的上手难度大幅降低，非常简单、好用，往往只需要几行代码就可以实现各种网络请求。
需要说明的是，上述代码的参数拼接方式和服务器相关，这个服务器不支持put和delete使用？+参数的方式，还有，鸿蒙的编译机制使得实际上只有在UI发生改变的时候才会重新编译，而只是修改rcpService这个文件并不会导致重新编译，望读者注意。