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

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);
});

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