前言

如果你是一名前端软件工程师，相比对Axios这种网络请求方式并不陌生，而在ArkTS中也可以使用这种方式。因此，对于有经验的程序员来说，或许使用axios去进行网络请求可能会比官方支持的http请求模块和远场通信RCP更加方便。

axios（基于Promise的HTTP客户端作用于浏览器和node.js）_百度百科

相关链接：

鸿蒙开发-基础HTTP网络请求文章浏览阅读384次，点赞3次，收藏5次。鸿蒙HTTP网络请求开发指南 本文介绍了鸿蒙(ArkTS)开发中HTTP网络请求的实现方法。主要内容为介绍ArkTS提供HTTP网络服务能力，支持GET、POST、PUT和DELETE等四种基本请求方式。 _鸿蒙 delete请求https://blog.csdn.net/weixin_58280240/article/details/148409500?spm=1011.2415.3001.5331

鸿蒙开发-RCP网络请求文章浏览阅读356次，点赞18次，收藏7次。本文介绍了使用RCP（Remote Communication Kit）实现网络请求的方法。RCP是对HTTP请求的封装，支持GET、POST、PUT、DELETE等请求方式。文章详细说明了如何搭建json-server测试服务器，并提供了完整的代码示例，包括FETCH请求和标准HTTP请求的实现。通过对比展示了RCP相比原生HTTP请求更简单易用的特点，同时提醒了鸿蒙开发中的编译注意事项。所有代码示例均包含成功和错误处理逻辑，适合开发者快速上手网络请求开发。https://blog.csdn.net/weixin_58280240/article/details/149088807?spm=1011.2415.3001.5331
下面，我们将尽可能简短明晰地讲清楚在原生鸿蒙开发下实现axios网络请求的功能。

准备

申请权限

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

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

获取第三方Axios模块

鸿蒙原生开发并没有直接提供Axios的请求方式，我们需要使用第三方工具来实现Axios网络请求，这里我们将使用OpenHarmony三方库中心仓@ohos/axios模块来实现。官方链接：OpenHarmony三方库中心仓

在终端运行下方命令即可完成安装：

ohpm install @ohos/axios

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

安装json-server服务器

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

1.在Node.js官网首页下载node.js和对应的npm：nodejs官方网站

 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

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

打开设备模拟器 

新建或打开已有设备模拟器，须确保新建项目的最低API低于设备模拟器API。

网络请求实例

还请读者完成以下目录结构的建立：
 

1.在entry->src->main下创建common，并在该目录下创建axiosClient.ets文件 

2.在entry->src->main下创建service，并在该目录下创建axiosService.ets文件

基础配置

在axiosClient中添加如下代码：

import axios from '@ohos/axios';

//网络请求客户端
export const axiosClient = axios.create({
  baseURL: 'http://10.0.2.2:3000/data', //这里是服务器基础url，也就是不会改变的部分。这里只作演示
  timeout: 1000,         //超时时间
  headers: {             //请求头
    'content-type': 'application/json'
  }
});

请求示例

GET请求

在axiosService中写入以下代码：

import { AxiosError, AxiosResponse } from "@ohos/axios"
//axiosClient文件的请求基础配置
import { axiosClient } from "../common/axiosClient"
import { url } from "@kit.ArkTS";

//json文件的数据结构
interface dataModel{
  id:string,
  text:string
}

export function getDataByAxios(){
  //参数
  let params = new url.URLParams({
    id:"1"
  });
  // 向给定ID的用户发起请求
  axiosClient.get<dataModel, AxiosResponse<dataModel>, null>("?"+params.toString())         //这里是参数拼接
    .then((response: AxiosResponse<dataModel>)=> {
      //获取数据
      console.info("获取数据",JSON.stringify(response));
    })
    .catch((error: AxiosError)=> {
      // 处理错误情况
      console.info("获取失败",JSON.stringify(error));
    })

  //除开上面的方式，也可以使用下面的方式，功能一致，只是实现不一样。之后不再提及

  // let response: AxiosResponse<dataModel> =
  //   await axiosClient.get<dataModel, AxiosResponse<dataModel>, null>(
  //     "?"+params.toString(),
  //   )

}

在Index.ets中写入UI相关代码：

import { getDataByAxios } from '../../service/axiosService';

@Entry
@Component
struct Index {
  
  build() {
    Column({space:10}) {
      Button('AXIOS-GET获取数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          getDataByAxios()
        })

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

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

可以发现axios获取的数据结构，实际数据在这个对象中的“data”中，这是与远场通信rcp和http模块所获取数据格式不同的。

POST请求

在axiosService中加入以下代码：

export function postDataByAxios(){
  // 向给定ID的用户发起请求
  axiosClient.post<dataModel, AxiosResponse<dataModel>, dataModel>("",{
    id:"3",
    text:"测试数据"
  })
    .then((response: AxiosResponse<dataModel>)=> {
      //获取数据
      console.info("添加数据",JSON.stringify(response));
    })
    .catch((error: AxiosError)=> {
      // 处理错误情况
      console.info("添加失败",JSON.stringify(error));
    })
}

 在Index.ets的Column中加入以下代码：

      Button('AXIOS-POST添加数据')
        .width('80%')
        .height(42)
        .onClick(()=>{
          postDataByAxios()
        })

 点击按钮，添加成功：

PUT请求

在axiosService中加入以下代码：

export function putDataByAxios(){
  axiosClient.put<dataModel, AxiosResponse<dataModel>, dataModel>("/3",{
    id:"3",
    text:"新测试数据"
  })
    .then((response: AxiosResponse<dataModel>)=> {
      //修改数据
      console.info("修改数据",JSON.stringify(response));
    })
    .catch((error: AxiosError)=> {
      // 处理错误情况
      console.info("修改失败",JSON.stringify(error));
    })
}

  在Index.ets的Column中加入以下代码：

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

点击按钮，修改成功： 

DELETE请求

在axiosService中加入以下代码：

export function deleteDataByAxios(){
  axiosClient.delete<dataModel, AxiosResponse<dataModel>, dataModel>("/3")
    .then((response: AxiosResponse<dataModel>)=> {
      //修改数据
      console.info("删除数据",JSON.stringify(response));
    })
    .catch((error: AxiosError)=> {
      // 处理错误情况
      console.info("删除失败",JSON.stringify(error));
    })
}

 在Index.ets的Column中加入以下代码：

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

点击按钮，删除成功：

总结

到此，结合基础HTTP网络请求和RCP网络请求两篇博文，我们完成了鸿蒙开发中主要网络请求方式的学习与实践。相较于http模块的直接请求和远场通信rcp请求，本文介绍的axios在实际项目中的应用更为广泛，是一种必须掌握的技能。

因此，我们衷心希望读者能通过这篇文章，快速掌握在鸿蒙原生开发下使用axios网络请求的基本能力，并能将其顺利运用到实际项目中去。