HarmonyOS通过 axios发送HTTP请求

灰太狼 2024-04-22 07:46 8阅读 0赞

我之前的文章 [HarmonyOS 发送http网络请求][HarmonyOS _http] 那么今天 我们就来说说axios  
这个第三方工具 想必所有的前端开发者都不会陌生

axios 本身也属于 HTTP请求 所以鸿蒙开发中也支持它  
但首先 想在HarmonyOS中 使用第三方工具库 就要先下载安装 ohpm 具体可以参考我的文章 [HarmonyOS 下载安装ohpm 鸿蒙第三方包管理工具][HarmonyOS _ohpm]

首先呢 我们还是要 在 对应模块下的 module.json5 文件中 的 module下 加上

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

申请网络权限 这样 HTTP请求才能发出去  
![在这里插入图片描述][725ea011e9be42a2bd93419fc354a37f.png]  
然后 我们访问地址 [https://ohpm.openharmony.cn/\#/cn/home][https_ohpm.openharmony.cn_cn_home]  
OK 这个网站中 就是 OpenHmarmony 三方库的一个中心仓了  
![在这里插入图片描述][6a85ac6fbfdb4832b618877eb0ab3706.png]  
这里 基本可以找到所有 harmonyos的第三方库  
最受欢迎中 就可以看到 axios  
![在这里插入图片描述][9679558aaaa44ad096349c9335b0c101.png]  
这里呢 我们就可以点进去看一下  
![在这里插入图片描述][789b0da0bfce41aa9922366d7217740e.png]  
进入详情页后 就能看到 它的介绍后下载命令  
![在这里插入图片描述][055ce473985c423cb6577c7088467b28.png]  
我们还是先打开编辑器 打开项目  
![在这里插入图片描述][99e31ad8152c45448a0cc80cac293625.png]  
我们项目根目录中 会有一个 oh-package.json5  
![在这里插入图片描述][d7407b3637fc48e5816fb3b89621a6b8.png]  
我们常规web端项目 也都会有一个 package.json  
是有一些共同点的 我们项目所有的依赖 都会在 这个文件的 dependencies 下的

这里呢 我们打开项目的 Terminal 简单说 运行终端起来  
![在这里插入图片描述][49a43d6e212a498593a9fe44589e65bf.png]  
然后 我们将官方给我们的安装命令搬过来  
终端执行

ohpm install @ohos/axios

![在这里插入图片描述][527bc0216fa74cdcb71f1ce70460e5e6.png]  
安装成功后 oh-package.json5 中的 dependencies 就能显示出工具的信息和版本啦  
![在这里插入图片描述][b6ce75860780471db6e59f4f0b38d759.png]  
项目根目录下的 oh\_modules 中 就装了 我们项目所有的依赖库  
![在这里插入图片描述][c0cf74dbfd564cff96de57ee1f203fe4.png]  
那么 我们axios已经进来 就可以使用它了

我这边 起了一个 java的项目  
![在这里插入图片描述][4662f710fa844f0db1fe86efd645598b.png]  
为本机 提供了一个数据接口  
![在这里插入图片描述][3ab89b55725641468bca3be00ef66beb.png]  
这边 大家也要想办法 自己弄个数据接口

然后 我们在 需要请求的组件中这样写

import axios from "@ohos/axios";
    @Entry
    @Component
    struct Dom {
        
    
      aboutToAppear() {
        
        axios.get(
        "http://localhost/books",
        ).then(res =>{
        
            let data:string = JSON.stringify(res);
            console.log(data);
        }).catch(err=> {
        
          console.log("请求失败");
        })
      }
    
      build() {
        
        Column({
        space: 30}) {
        
    
        }
        .width('100%')
        .height('100%')
      }
    }

首先 我们 要导入 axios import axios from “@ohos/axios”;  
然后 通过 axios 工具对象 调用它的get函数  
指定请求地址 和 请求路径

axios 怎么发请求这种问题 我就不具体讲了 大家可以去axios 官方查 反正 和web端写法是一样的  
项目技术不同 但axios是一样的

预览器运行代码 通过终端输出可以看出 它明显是请求成功了  
![在这里插入图片描述][2514ffa2c3264658aeb09a6fc20a7c43.png]

[HarmonyOS _http]: https://blog.csdn.net/weixin_45966674/article/details/135750970
[HarmonyOS _ohpm]: https://blog.csdn.net/weixin_45966674/article/details/136453421
[725ea011e9be42a2bd93419fc354a37f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/12b9d09ff88c472cbf881503e7f61a9c.png
[https_ohpm.openharmony.cn_cn_home]: https://ohpm.openharmony.cn/#/cn/home
[6a85ac6fbfdb4832b618877eb0ab3706.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a57a39a79634419aaa709608b44799db.png
[9679558aaaa44ad096349c9335b0c101.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f3fedfd893854493a9f5371e8772c644.png
[789b0da0bfce41aa9922366d7217740e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/d74635a3772e45c49486022b794a2ed0.png
[055ce473985c423cb6577c7088467b28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7b2982276d784557a3f09f6a488bedd5.png
[99e31ad8152c45448a0cc80cac293625.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/9c99007ee9d0441b88bb9b89372bbfb5.png
[d7407b3637fc48e5816fb3b89621a6b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/8a36a506a394402d993196f71e560672.png
[49a43d6e212a498593a9fe44589e65bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5ee846a409c74d3b8df80e2b8dd1224a.png
[527bc0216fa74cdcb71f1ce70460e5e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a37085470c2b47c998844bccbe9ddec5.png
[b6ce75860780471db6e59f4f0b38d759.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/bdd29bf4bada43e2b53cb6025e982af6.png
[c0cf74dbfd564cff96de57ee1f203fe4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/66c1f914ff2a4eb2bcdb4e206092763f.png
[4662f710fa844f0db1fe86efd645598b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/1144c5dc163548728bb3e794d52707b9.png
[3ab89b55725641468bca3be00ef66beb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/34fb6b7e8a45498a9758daada0045c62.png
[2514ffa2c3264658aeb09a6fc20a7c43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/880ecd1b047642ad84cd43ab9fee02d3.png