OpenHarmony开发者论坛

标题: axios开启高效网络请求之旅 [打印本页]

作者: 润开鸿_坚果 时间: 2024-5-7 22:47
标题: axios开启高效网络请求之旅
[md]昨天我们用的是httpclient发起网络请求，今天我们使用axios

## 介绍

[Axios](https://gitee.com/link?target=ht ... com%2Faxios%2Faxios) ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。

* **http 请求**
* **Promise API**
* **request 和 response 拦截器**
* **转换 request 和 response 的 data 数据**
* **自动转换 JSON data 数据**

## 下载安装

```
ohpm install @ohos/axios
```

## 需要权限

```
ohos.permission.INTERNET
```

## 发起一个 GET 请求

**axios支持泛型参数，由于ArkTS不再支持any类型，需指定参数的具体类型。如：axios.get<T = any, R = AxiosResponse, D = any>(url)**

* **T: 是响应数据类型。当发送一个 POST 请求时，客户端可能会收到一个 JSON 对象。T 就是这个 JSON 对象的类型。默认情况下，T 是 any，这意味着可以接收任何类型的数据。**
* **R: 是响应体的类型。当服务器返回一个响应时，响应体通常是一个 JSON 对象。R 就是这个 JSON 对象的类型。默认情况下，R 是 AxiosResponse，这意味着响应体是一个 AxiosResponse 对象，它的 data 属性是 T 类型的**
* **D: 是请求参数的类型。当发送一个 GET 请求时，可能会在 URL 中添加一些查询参数。D 就是这些查询参数的类型。参数为空情况下，D 是 null类型。**

## 完整源码

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

@Entry
@Component
struct SecondPage {
@State message: string = 'Hello World';

aboutToAppear(): void {

this.getDate()
  }

getDate() {

axios<string, AxiosResponse<string>, null>({
method: "get",
url: '你的url'
   }).then((res: AxiosResponse) => {
this.message=JSON.stringify(res.data)
console.info('result:' + JSON.stringify(res.data));
   }).catch((error: AxiosError) => {
console.error(error.message);
   })
  }

build() {
RelativeContainer() {
Text(this.message)
   .id('HelloWorld')
   .fontSize(50)
   .fontWeight(FontWeight.Bold)
   .alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
   })
   }
   .height('100%')
   .width('100%')
  }
}
```

## 效果

![image-20240507224552266](https://luckly007.oss-cn-beijing ... 240507224552266.png)
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)