ArkTS - 网络请求_arkts怎么下载axios

一、Axios请求 

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

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

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

1、ohpm包管理器

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

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

​

​

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

ohpm -v

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

​

2、axios快速使用

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

1、下载axios

ohpm install @ohos/axios

​

2、开放网络权限

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

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

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

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

​

示例

​

其中有三个常用属性

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

​

创建一个TypeScript文件，写数据api（为什么不使用ArkTS是因为还要写entry、build等东西，对于数据api来说是没有意义的，所以直接创建一个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）这样就可以成功互通了。

2、post请求参数格式

发送http网络请求是，默认的参数格式是application/www-form-urlencoded，这个时候参数要使用param

如果你想要发送json格式的参数，首先要在header中表明你要使用json格式，其次参数要使用data

二、代码优化

1、axios拦截器

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

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;