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，因此只需完成第⼀步即可，具体内容如下
{"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 选项卡，启动终端
ohpm i @ohos/axios 12.3. axios 快速⼊⻔
第⼀步：导⼊ axios
import axios from '@ohos/axios' 第⼆步：创建 axios 实例
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()⽅法来处理操作失败的情况，例如
get(...).then((response:AxiosResponse)=>{//处理请求成功的结果...}).catch((error:AxiosError)=>{//处理请求失败的错误...})AxiosResponse是axios定义的响应结果类型，默认情况下，通过axios发送的所有请求，其成功的响应结果都是该类型。其包含的属性如下
{//服务器返回的响应结果data: {},//服务器响应的 HTTP 状态码status: 200,//服务器响应的 HTTP 状态信息statusText: 'OK',// 服务器响应头headers: {},//axios请求的配置信息config: {},//⽣成此响应的请求信息request: {}
} 因此， response.data 才是服务器返回的真实数据，具体处理逻辑如下
get(...).then((response:AxiosResponse)=>{//获取服务器返回的数据let data = response.data;//处理服务器返回的数据...}).catch((error:AxiosError)=>{//处理请求失败的错误...}) 12.4. axios 拦截器
axios 可以分别为请求和响应配置拦截器，请求拦截器可在请求发送前进⾏拦截，响应拦截器可以在 then() 或 者 catch() ⽅法执⾏前进⾏拦截，如下图所示
在拦截器中，开发者可以对请求的参数或者响应的结果做⼀些统⼀的处理，⽐如在请求拦截器中统⼀为所有请求增 加 token 这⼀ Header ，在响应拦截器中统⼀处理错误响应。
拦截器的配置⽅式如下
请求拦截器
// 添加请求拦截器
instance.interceptors.request.use((config:InternalAxiosRequestConfig) => {// 对请求数据做点什么return config;
}, (error:AxiosError) => {// 对请求错误做些什么return Promise.reject(error);
}); 响应拦截器
// 添加响应拦截器
instance.interceptors.response.use((response:AxiosResponse)=> {// 对响应数据做点什么return response;
}, (error:AxiosError)=> {// 对响应错误做点什么return Promise.reject(error);
});最后，如果这篇文章对你有所帮助请 “点赞 收藏+关注” ，感谢支持！祝您编码愉快
![Vulhub：Shiro[漏洞复现]](https://i-blog.csdnimg.cn/direct/49e0a29570f64ac8abb316630f5241ec.png)
