axios发起网络请求
昨天我们用的是httpclient发起网络请求，今天我们使用axios
介绍
Axios[1] ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。
- http 请求
- Promise API
- request 和 response 拦截器
- 转换 request 和 response 的 data 数据
- 自动转换 JSON data 数据
下载安装
代码语言：javascript复制ohpm install @ohos/axios
需要权限
代码语言：javascript复制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类型。
完整源码
代码语言：javascript复制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%')
}
}
效果
参考资料
[1]
Axios: https://gitee.com/link?target=https://github.com/axios/axios
