鸿蒙ArkTS实现http，axios网络请求

实现http请求，在ArkTS中我们可以直接使用http如下代码

1. import http from '@ohos.net.http'
2. @Entry
3. @Component
4. struct HttpPage {
5.   @State message: string = 'Hello World'
7.   build() {
8.       Column({space:20}) {
9.         Row(){
10.           Button('发送http请求')
11.             .onClick(()=>{
12.               let httpRequest = http.createHttp();
13.               httpRequest.request(
14.                 'http://localhost:8018/device/getDeviceDetail',
15.                 {
16.                   method:http.RequestMethod.POST,
17.                   extraData:{
18.                     sn:'1001'
19.                   }
20.                 }
21.               )
22.                 .then(resp=>{
23.                   console.log("resp=>",JSON.stringify(resp))
24.                   if(resp.responseCode === 200){
25.                     console.log(resp.result.toString())
26.                   }
27.                 }).catch(err=>{
28.                 console.log('请求错误err=>',err)
29.               })
31.             })
32.         }
34.       }
35.       .width('100%')
36.     .height('100%')
37.   }
38. }

复制代码

实现axios我们需要使用一个第三方工具

• 下载ohpm工具包，点击链接获取。
  

2. 解压文件，进入“ohpm/bin”目次，打开下令行工具，实行如下指令初始化ohpm
Windows情况下实行：
init.bat 
如果init.bat不可以使用./init.bat
3. 将ohpm配置到情况变量中。

1. export OHPM_HOME=/home/xx/Downloads/ohpm  #本处路径请替换为ohpm的安装路径
2. export PATH=${OHPM_HOME}/bin:${PATH}

复制代码

4. 安装完成后，实行ohpm -v 在终端中显示版本号安装成功
5. 安装axios库，在链接
OpenHarmony三方库中央仓
找到@ohos/axios
6. 在当前项目终端目次下实行

1. ohpm install @ohos/axios

复制代码

OpenHarmony三方库中央仓需要网络权限，在module.json5文件中将以下代码配置到module中

1. "requestPermissions": [
2.       {
3.         "name": 'ohos.permission.INTERNET'
4.       }
5.     ],

复制代码

 新建一个.ets文件，如下代码写入

1. import http from '@ohos.net.http'
2. import axios from  '@ohos/axios'
3. @Entry
4. @Component
5. struct HttpPage {
6.   @State message: string = 'Hello World'
8.   build() {
9.       Column({space:20}) {
10.         Row(){
11.           Button('发送http请求')
12.             .onClick(()=>{
13.               let httpRequest = http.createHttp();
14.               httpRequest.request(
15.                 'http://localhost:8018/device/getDeviceDetail',//请求路径http://localhost:8018/device/getDeviceDetail
16.                 {
17.                   method:http.RequestMethod.POST,
18.                   extraData:{
19.                     sn:'1001'
20.                   }
21.                 }
22.               )
23.                 .then(resp=>{
24.                   console.log("resp=>",JSON.stringify(resp))
25.                   if(resp.responseCode === 200){
26.                     console.log(resp.result.toString())
27.                   }
28.                 }).catch(err=>{
29.                 console.log('请求错误err=>',err)
30.               })
32.             })
34.         }
35.         Row(){
36.           Button('发送axios请求')
37.             .onClick(()=>{
38.               axios.post(
39.                 'http://localhost:8018/device/getDeviceDetail',
40.                 {
41.                   sn:'1001'
42.                 }
43.               ).then(response=>{
44.                 console.log("response=>",JSON.stringify( response))
45.               }).catch(err=>{
46.                 console.log('err=>',err)
47.               })
48.             })
50.         }
51.       }
52.       .width('100%')
53.     .height('100%')
54.   }
55. }

复制代码

 就可以实现axios请求了，当然后续可以将http和axios封装成一个单独的文件，方便后续项目开发的接口请求
注意：网络请求接口需要替换成本身项目标相应接口，本文中接口地点为当地地点。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。