ArkTS发送异步请求

用http和axios分别发送请求

用http发送请求

效果

这个请求网址是可以用的：https://api.xygeng.cn/one
代码

import http from '@ohos.net.http';

class Book {
  id: string
  tag: string
  name: string
  origin: string
  content: string
  created_at: Date
  updated_at: Date
  error: object
  updateTime: number

  constructor(id: string, tag: string, name: string, origin: string, content: string, created_at: Date,
    updated_at: Date, error: object, updateTime: number) {
    this.id = id
    this.tag = tag
    this.name = name
    this.origin = origin
    this.content = content
    this.created_at = created_at
    this.updated_at = updated_at
    this.error = error
    this.updateTime = updateTime
  }
}

class R {
  code: number;
  data: Book;

  constructor(code:number,book:Book) {
    this.code = code
    this.data = book
  }
}




@Entry
@Component
struct HttpDemoPage {
  @State message: string = 'Hello World';
  @State book:Book = new Book('id','tag','name','origin','content',new Date(),new Date(),new Object(),123)
  aboutToAppear(): void {
    let httpRequest = http.createHttp()
    let url = 'https://api.xygeng.cn/one'

    httpRequest.request(url, {
      method: http.RequestMethod.GET
    })
      .then((resp: http.HttpResponse) => {
        if (resp.responseCode === 200) {
          let re:R = JSON.parse(resp.result.toString())
          // console.log(`${re.data}`)
          // console.log(re.data.name)//可以获取
          this.book = re.data
          console.log(JSON.stringify(re.data))
        }
      })
      .catch((err: Error) => {
        console.log(JSON.stringify(err))
      })
  }
  build() {
    Column({space:8}){
      Text(`标签：${this.book.tag}`)
      Text(`作者：${this.book.name}`)
      Text(`名字：${this.book.origin}`)
      Text(`摘要：${this.book.content}`)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

axios发起请求：需要提前下载axios（需要node.js环境），然后导入
下载参考链接: OpenHarmony
代码

import axios, { AxiosResponse } from '@ohos/axios'
const instance  = axios.create({
  baseURL:'https://api.xygeng.cn/one',
  timeout:1000
})
class Book {
  id: string
  tag: string
  name: string
  origin: string
  content: string
  created_at: Date
  updated_at: Date
  error: object
  updateTime: number

  constructor(id: string, tag: string, name: string, origin: string, content: string, created_at: Date,
    updated_at: Date, error: object, updateTime: number) {
    this.id = id
    this.tag = tag
    this.name = name
    this.origin = origin
    this.content = content
    this.created_at = created_at
    this.updated_at = updated_at
    this.error = error
    this.updateTime = updateTime
  }
}

class R {
  code: number;
  data: Book;

  constructor(code:number,book:Book) {
    this.code = code
    this.data = book
  }
}

class RInfo{
  data:R

    constructor(data:R) {
  this.data = data
  }
}
@Entry
@Component
struct AxiosDemoPage {
  @State message: string = 'Hello World';
  @State book:Book = new Book('id','tag','name','origin','content',new Date(),new Date(),new Object(),123)

  aboutToAppear(): void {
    // let url = 'https://api.xygeng.cn/one'
    //发起axios的请求
    instance.get('',{params:{username:'admin'}})
      .then((response:AxiosResponse)=>{
        if(response.status === 200) {
          let re: R = JSON.parse(JSON.stringify(response.data))
          this.book = re.data
        }
      })
      .catch((error:Error)=>{
        console.log(JSON.stringify(error))
      })

  }
  build() {
    Column({space:8}){
      Text(`标签：${this.book.tag}`)
      Text(`作者：${this.book.name}`)
      Text(`名字：${this.book.origin}`)
      Text(`摘要：${this.book.content}`)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')

  }
}