零基础学鸿蒙开发--第九篇--网络请求

12. ⽹络请求

鸿蒙系统提供了 http 模块 ⽤于发送 http 请求,另外, OpenHarmony社区基于该模块将前端开发中常⽤的⽹络请 求库 axios 移植到了鸿蒙系统,因此我们也可以在鸿蒙系统中使⽤ axios 发送 http 请求,下⾯重点为⼤家介绍 axios 的⽤法。
12.1. 准备⼯作
准备接⼝⽂档,需要连同⼀个局域⽹
12.1.2. 申请⽹络访问权限
默认情况下,应⽤只能访问有限的系统资源,若应⽤需要访问⼀些受保护的数据(照⽚、通讯录、位置等)或者功 能(打电话、发短信、联⽹等),需要先申请相应的权限。鸿蒙系统的权限列表可参考 官⽅⽂档 。
权限的申请可分为如下两步
第⼀步:声明所需权限
开发者需要在 entry/src/main/module.json5 ⽂件中声明所需权限,具体格式如下

复制代码
{

 "module": {

 ......

 "requestPermissions": [

   {

     "name": 'ohos.permission.******'

   }

  ]

 }

}

第⼆步:申请授权

  • 如果⽬标权限的授权⽅式为system_grant,开发者在完成第⼀步后,系统会在安装应⽤时⾃动为其进⾏权限预授予,开发者不需要做其他操作即可使⽤权限。

  • 如果⽬标权限的授权⽅式为是user_grant,开发者在完成第⼀步后,还需要在应⽤运⾏时弹窗请求⽤户授权,具体操作可参考官⽅⽂档

由于⽹络访问权限的授权⽅式为system_grant,因此只需完成第⼀步即可,具体内容如下

javascript 复制代码
{

 "module": {

 ......

 "requestPermissions": [

     {

       "name": 'ohos.permission.INTERNET'

     }

   ]

 }

}

12.2. 安装axios
axios 相当于鸿蒙应⽤项⽬的⼀个第三⽅库,鸿蒙应⽤项⽬使⽤ ohpm管理(包括安装、卸载等)第三⽅库。除了 axios ,还有很多其他的第三⽅库可供开发者使⽤,所有的第三⽅库都收录在 OpenHarmony 三⽅库中⼼仓 中。
12.2.1. 配置环境变量
为⽅便执⾏ ohpm 命令,需先将 ohpm 的安装⽬录添加到操作系统的 Path 环境变量下,具体操作如下
第⼀步:查看 ohpm 安装⽬录
打开 Deveco Studio 设置界⾯,搜索 ohpm

第⼆步:配置环境变量
将上述⽬录添加到 Path 环境变量

完成上述环境变量的配置之后,便可在任意⽬录下执⾏ ohpm 命令了。
12.2.2. 安装 axios
点击 Deveco Studio 底部的 Terminal 选项卡,启动终端

javascript 复制代码
ohpm i @ohos/axios

12.3. axios 快速⼊⻔
第⼀步:导⼊ axios

javascript 复制代码
import axios from '@ohos/axios'

第⼆步:创建 axios 实例

javascript 复制代码
const instance = axios.create({
 baseURL: 'http://<ip>:<port>',
 timeout: 2000
})

注意: 需要根据实际情况替换上述的 ip 地址和端⼝号
第三步:发送http请求

创建axios实例后,便可通过该实例的api来发送各种http请求,常⽤的api定义如下

|----------------------------------|----------------|
| api | 功能 |
| get(url, config?): Promise | 发送GET请求 |
| delete(url, config?): Promise | 发送DELETE请求 |
| post(url,data?,config?): Promise | 发送POST请求 |
| put(url,data?,config?): Promise | 发送PUT请求 |

第四步:获取请求结果

上述api的返回值类型均为Promise,Promise是JavaScript中⽤于表示异步操作结果的对象,若操作成功,其中会包含具体结果,若操作失败,其会包含错误的原因。在实际应⽤中,开发者可以通过该对象的then()⽅法来处理操作成功时的结果,通过catch()⽅法来处理操作失败的情况,例如

javascript 复制代码
get(...)
 .then((response:AxiosResponse)=>{
 //处理请求成功的结果
 ...
 })
 .catch((error:AxiosError)=>{
 //处理请求失败的错误
 ...
 })

AxiosResponse是axios定义的响应结果类型,默认情况下,通过axios发送的所有请求,其成功的响应结果都是该类型。其包含的属性如下

javascript 复制代码
{
 //服务器返回的响应结果
 data: {},
 //服务器响应的 HTTP 状态码
 status: 200,
 //服务器响应的 HTTP 状态信息
 statusText: 'OK',
 // 服务器响应头
 headers: {},
 //axios请求的配置信息
  config: {},
  //⽣成此响应的请求信息
  request: {}
}

因此, response.data 才是服务器返回的真实数据,具体处理逻辑如下

javascript 复制代码
get(...)
 .then((response:AxiosResponse)=>{
 //获取服务器返回的数据
     let data = response.data;
 //处理服务器返回的数据
 ...
 })
 .catch((error:AxiosError)=>{
 //处理请求失败的错误
 ...
 })

12.4. axios 拦截器
axios 可以分别为请求和响应配置拦截器,请求拦截器可在请求发送前进⾏拦截,响应拦截器可以在 then() 或 者 catch() ⽅法执⾏前进⾏拦截,如下图所示

在拦截器中,开发者可以对请求的参数或者响应的结果做⼀些统⼀的处理,⽐如在请求拦截器中统⼀为所有请求增 加 token 这⼀ Header ,在响应拦截器中统⼀处理错误响应。
拦截器的配置⽅式如下
请求拦截器

javascript 复制代码
// 添加请求拦截器
instance.interceptors.request.use((config:InternalAxiosRequestConfig) => {
 // 对请求数据做点什么
 return config;
}, (error:AxiosError) => {
 // 对请求错误做些什么
 return Promise.reject(error);
});

响应拦截器

javascript 复制代码
// 添加响应拦截器
instance.interceptors.response.use((response:AxiosResponse)=> {
 // 对响应数据做点什么
 return response;
}, (error:AxiosError)=> {
 // 对响应错误做点什么
 return Promise.reject(error);
});

最后,如果这篇文章对你有所帮助请 "点赞 收藏+关注" ,感谢支持!祝您编码愉快

相关推荐
慧一居士24 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead26 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app