Harmony OS5开发学习笔记-使用 axios 进行网络请求

axios (第三方封装请求模块) 特点：

自动 JSON 解析：无需手动调用 JSON.parse() 处理响应数据。
中文参数自动编码：使用 params 传递查询参数时，axios 会自动处理中文字符的 URL 编码(encodeURIComponent)。
智能请求头处理：常见请求头（如 Content-Type）会根据请求方法和数据类型自动设置。
泛型定义相对繁琐：为了获得良好的类型推断，泛型参数的编写需要一定工作量。

下载安装

OpenHarmony三方库中心仓找到包名=>编译器终端对话框输入 ohpm install 包名
安装完成， Sync Now 按钮同步项目
记录查询: 项目的 oh-package.json5 文件中; 安装成功后，oh_modules 目录下会出现 @ohos/axios。

使用axios

基础运用

//调用axios模块
import axios, { AxiosResponse } from '@ohos/axios';

axios({
  url:'https://xxx.xxx.net/api/area',//'资源统一定位符',
  //需要传递给后端的中文参数不再需要encodeURIComponent编码
  //query请求体查询参数
  params:{pname:'江苏省',cname:'南京市'}  
})
.then((res:AxiosResponse<T>)=>{
  //res.data.xx//res.data是axios返回数据的字段
    AlertDialog.show({message:res.data.后端返回提示})
})

进阶使用 (POST 示例 with Async/Await & Error)

import axios, { AxiosResponse } from '@ohos/axios';

interface SubmitDataType {username: string,password: string}
asnyc function fn(){
  //考虑请求成功和失败的情况的存在
  try{
    //axios<null,AxiosResponse<后端响应数据类型,null>,请求体参数body类型>三个泛型参数
  const res =await axios<null,AxiosResponse<T,null>,SubmitDataType>({
    url:'https://xxx.xxx.net/api/area',//'资源统一定位符',
    method:'post',
    //header:{ContentType:'application/json'},用axios不需要加请求头,会自动识别并加入
    //extraData:{}请求体body参数改成data:{}
    data:{
      username:'zhangsan',
      password:123456789
    }    
  })
  //测试
  AlertDialog.show({message:res.data.后端返回提示})
  }
  catch(err){
      AlertDialog.show({message:JSON.stringify(err)})
  }
}
fn()