ArkTS - 网络请求

一、Axios请求

应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

前端开发肯定都使用过一个叫axios 的第三方库 ，它是是一个基于promise的网络请求库，可以用于浏览器和 node.js，它是前端最流行的发送ajax请求的第三方库。

如果你不知道什么是promise，推荐看看我的上一篇博客网络请求 - 异步编程详解-CSDN博客

1、ohpm包管理器

OHPM CLI 作为鸿蒙生态三方库的包管理工具，支持OpenHarmony共享包的发布、安装和依赖管理。

下载ohpm工具包，点击链接获取。
解压文件，进入"ohpm/bin"目录，打开命令行工具，执行如下指令初始化ohpm。

安装完成之后，执行如下命令：

ohpm -v

终端输出为版本号（如：0.6.10），则表示成功

2、axios快速使用

进入项目目录，然后输入下面命令

1、下载axios

TypeScript 复制代码

ohpm install @ohos/axios

2、开放网络权限

使用该功能需要申请ohos.permission.INTERNET权限。

TypeScript 复制代码

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

此时我们再次看向项目的目录，其中的oh-package.json5就是管理依赖的文件，类似于spring的pom.xml

在我们安装完axios依赖之后就可以在dependecies中看到我们安装的依赖

示例

其中有三个常用属性

名称	类型	描述
status	number	响应状态码
headers	Object	响应头
data	any	服务器返回的响应体

现在我们随便搭建一个后端服务器，我这里是使用了springboot实现了一个简单的接口返回一个json数据

创建一个TypeScript文件，写数据api（为什么不使用ArkTS是因为还要写entry、build等东西，对于数据api来说是没有意义的，所以直接创建一个typescript文件来写）

TypeScript 复制代码

import axios from "@ohos/axios";

class MoreModel {
  baseURL: string = "http://localhost:8888/"

    getMore(): any {
    return axios.get(
      `${this.baseURL}boiler/status`,
      {
        params: {}
      }
    )
      .then(response => {
        if (response.status == 200) {
          console.log("请求成功,数据格式为", response.data)
          console.log("由于data是一个json对象格式，所以想看数据的信息要先给他转成一个字符串")
          console.log(JSON.stringify(response.data))

          return response.data;
        } else {
          console.log("请求失败")
        }
      })
      .catch(err => {
        console.log(err);
      })
  }
}

const moreModel = new MoreModel();

export default moreModel as MoreModel

在ArkTS中调用TS的函数

查看控制台日志

成功接收后端接口数据

注意事项

1、使用模拟器发送请求时baseURL不可以直接写localhost

以上的操作都是在预览页中直接发起的请求，但是使用模拟器去执行同样的程序却发现后端接受不到数据。这是因为模拟器的ip与后端服务器子网不一样。 "localhost" 通常映射到本地回环地址 127.0.0.1，而在模拟器环境中，这个地址可能被映射为模拟器的地址。

比如我的模拟器ip为10.0.2.15，而是springboot所在的ip为192.168.1.168

这时再习惯性的使用localhost去请求后端服务器（http://localhost:8888）就会解析为http://10.0.2.15:8888，但是很明显你的鸿蒙模拟器什么都没有，自然也就无法发起与springboot服务成功通信。

++因此要写清楚ip（http://192.168.1.168:8888）这样就可以成功互通了。++

二、代码优化

1、axios拦截器

拦截器，顾名思义就是在你发起axios请求或是得到响应时先统一拦截一下，在这里做出一些逻辑处理，如判断状态码，获取token等等。

TypeScript 复制代码

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'

//请求地址的公共前缀
const baseURL: string = "http://192.168.1.168:8888";
//创建实例
const instance = axios.create({ baseURL })

//请求拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {

  console.log("testTag","我是请求拦截器，我把每一个请求都拦截了一下哦");
  console.log("testTag",config.url)

  return config;
  // config.headers.Authorization =
})


//响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
  console.log("testTag","我是响应拦截器，我把每一个响应都拦截了一下哦");
  if (response.status == 200){

    console.log("testTag","请求成功，数据为", JSON.stringify(response.data));
    if (response.data.code == 0){
      console.log("testTag",`token为${response.data.data}`)
      return response.data;
    }

    console.log("testTag",`${response.data.message}`)
    return Promise.reject(response.data.message);

  }else {
    console.log("testTag","请求失败")
    Promise.reject("请求失败,结束异步")
  }

},(error: AxiosError) => {
  Promise.reject(error)
})

export default instance;