网络连接 - 第三方库 axios

[cnwutianhao]

axios 是前端开发中用来发送 ajax 请求的最流行的第三方库，ajax 请求本质也属于 http 请求，因此在鸿蒙开发中也依然可以使用 axios。

一、下载和配置 ohpm

ohpm 的全称是 OpenHarmony Package Manager，是一个 npm 包管理工具，可以方便的在鸿蒙开发中安装第三方库。

1. 下载 ohpm 工具包

   如果已经安装了 DevEco Studio NEXT 版本，是自带 ohpm 的。如果没找到也可以在官网下载 Command Line Tools for HarmonyOS NEXT Developer，这个里面就包含了 ohpm。

   地址：

   https://developer.huawei.com/consumer/cn/download/
   

2. 环境变量配置

   各个系统配置环境变量有所不同，可以参考鸿蒙开发者网站提供的文档进行配置。

   地址：

   https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-commandline-get-0000001954334245-V5
   

3. 验证 ohpm 是否配置成功

   ohpm -v
   1.2.0

二、下载和安装 axios

OpenHarmony 三方库中心仓 axios 官网地址：
https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios

1. 下载 axios

   ohpm install @ohos/axios

2. 开放网络权限

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

3. 查看 axios 是否已经引用到工程

   打开 oh-package.json5 文件，查看是否包含 axios：

   {
     "modelVersion": "5.0.0",
     "description": "Please describe the basic information.",
     "dependencies": {
       "@ohos/axios": "^2.2.2"
     },
     "devDependencies": {
       "@ohos/hypium": "1.0.18",
       "@ohos/hamock": "1.0.0"
     }
   }

   在项目根目录能看到 oh_modules 文件夹，里面包含了 axios 的源码。

三、使用 axios

1. 导入 axios

   import axios from '@ohos/axios'

2. 发送请求并处理响应

   axios.get(
     'url',
     {
       params: { 'param1': 'value1' }
     }
   )
     .then((response: AxiosResponse) => {
       if (response.status !== 200) {
         console.log('查询失败')
       }
       console.log('查询成功', JSON.stringify(response.data))
     })
     .catch((error: AxiosError) => {
       console.log('查询失败', JSON.stringify(error))
     })

   AxiosResponse 的结构如下：

   名称	类型	描述
   status	number	响应状态码
   headers	Object	响应头
   data	any	服务端返回的响应体