axios发起网络请求

徐建国

发布于 2024-06-19 20:27:52

910

发布于 2024-06-19 20:27:52

文章被收录于专栏：个人路线个人路线

axios发起网络请求

昨天我们用的是httpclient发起网络请求，今天我们使用axios

介绍

Axios[1] ，是一个基于 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%')
  }
}