# AxiosDemo

**Repository Path**: scenario-samples/axios-demo

## Basic Information

- **Project Name**: AxiosDemo
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例对Axios的部分功能进行了封装，通过axios.request()方法实现了网络请求的功能。可更改Config配置文件以访问不同地址。

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-13
- **Last Updated**: 2025-06-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Axios网络请求

## 介绍

该示例对Axios的部分功能进行了封装，通过axios.request()方法实现了网络请求的功能。可更改Config配置文件以访问不同地址。

## 效果预览

![](./screenshots/axios.gif)

## 约束与限制

1. 本示例支持 API Version 12 Release及以上版本。
2. 本示例支持 HarmonyOS 5.0.0 Release SDK及以上版本。
3. 本示例需要使用DevEco Studio 5.0.0 Release及以上版本进行编译运行。

## 使用说明

需安装axios依赖。封装的工具类中的其他方法，开发者可依照request方法自建服务端进行测试。

### 权限说明

需要网络权限

```
ohos.permission.INTERNET
```

## 实现思路

1. package.json5文件中配置axios依赖

```
"dependencies": {
  "@ohos/axios": "^2.2.0"
}
```

2. 封装自定义工具类，封装请求方法

```ts
async request(url: string): Promise<Result> {
  let result: Result = {}
  let res: AxiosResponse = await axios.request({ url: url, method: 'get' })
  result.statue = res ? JSON.stringify(res.status) : '';
  result.data = res ? JSON.stringify(res.data) : '';
  result.statusText = res ? res.statusText : '';
  return result
}
```

3. 定义Config接口并实现

```ts
export const demoConfig1: DemoConfig = {
  baseUrl: getContext().resourceManager.getStringByNameSync('url_develop'), // 基础请求地址
  ......
}
```

4. 调用工具类请求方法获取响应数据

```ts
this.startTime = new Date().getTime()
this.axiosUtil.request(this.baseUrl)
  .then((res) => {
    this.status = res.statue
    this.message = res.data
    this.endTime = new Date().getTime()
    hilog.error(0x0000, 'testTag', '%{public}s', JSON.stringify(res));
  })
  .catch((err: BusinessError) => {
    hilog.error(0x0000, 'testTag', 'err code == %{public}s msg == %{public}s', err.code,                   err.message);
  })
```

## 工程目录

```
entry/src/main/ets/
|---entryability 
|   |---EntryAbility.ets    
|---pages
|   |---Index.ets                       // 首页
|---config
|   |---Config.ets                      // 访问配置文件     
|---view
|   |---ViewComponent.ets               // 数据展示组件
common/src/main/ets/
|---common
|   |---AxiosUtil.ets                   // axios封装工具类
|---utils
|   |---ConfigModel.ets                 // 配置数据模型
```

## 参考文档

[在 HarmonyOS 应用开发中使用 Axios 封装网络请求](https://developer.huawei.com/consumer/cn/forum/topic/0202169762782661194?fid=0109140870620153026)

## ChangeLog

| 修改内容   | 时间       |
| :--------- | :--------- |
| 第一次提交 | 2024.11.18 |
| UI优化     | 2025.3.11  |

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">