import axios, { AxiosResponse } from ‘@ohos/axios‘；——get与post请求示例

红目香薰

发布于 2024-11-30 12:45:23

4800

代码可运行

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

运行总次数：0

代码可运行

axios库安装

import axios, { AxiosResponse } from ‘@ohos/axios‘；爆红解决-CSDN博客

1、get请求示例

请求测试地址：

https://openatom.atomgit.com/api/toolbar/queryToolbarListByCommunityId

结构

模型层

ApiResult

export interface ApiResult<T> {
  code: number;
  msg: string;
  data: T;
}

Community

export interface Developer {
  barId:number;
  barName:string;
  barNameEn:string|null;
  jumpUrl:string;
  communityId:number;
  sort:number;
  flag:number;
  createName:string;
  createTime:string;
  updateName:string|null;
  updateTime:string
}

视图层

import axios, { AxiosResponse } from '@ohos/axios';
import { ApiResult } from '../model/ApiResult';
import { BusinessError } from '@kit.BasicServicesKit';
import { Community } from '../model/Community';
import { List } from '@kit.ArkTS';

@Entry
@Component
struct Index {
  @State info: Community[] | null = [];

  build() {
    Stack() {
      Column() {
        ForEach(this.info, (com: Community, index) => {
          Column(){
            Text(com.barName)
            Text(com.jumpUrl)
          }
        })
      }
    }
  }

  aboutToAppear(): void {
    this.queryCommunity()
  }

  async queryCommunity() {
    try {
      const url = "https://openatom.atomgit.com/api/toolbar/queryToolbarListByCommunityId";
      const result: AxiosResponse<ApiResult<Community[]>> =
        await axios.get<ApiResult<Community[]>, AxiosResponse<ApiResult<Community[]>>, null>(url, {
          headers: {
            "X-ATOMGIT-POP-COMMUNITY": "openatom"
          }
        });
      if (result.status === 200) {
        const apiResult = result.data;
        if (apiResult.code === 200) {
          this.info = apiResult.data;
        } else {
          this.info = null;
        }
      }
    } catch (error) {
      const err = error as BusinessError;
    }
  }
}

效果：

2、post请求示例

请求测试地址：

开发者列表 - 开放原子开源基金会开源运营专区APIs

结构

模型层

ApiResult

export interface ApiResult<T> {
  code: number;
  msg: string;
  data: T;
}

Recommend

export interface Recommend {
  nickname:string;
  photo:string;
  userId:string;
  username:string;
  profile:string;
  jump:string;
  isFocus:boolean;
  focusButtonDisabled:boolean;
  warehouseList:[]
}

Developer

import { Recommend } from "./Recommend";

export interface Developer {
  records:Recommend[];
  total:number;
  size:number;
  current:number;
  pages:number;
}

视图层

import axios, { AxiosResponse } from '@ohos/axios';
import { BusinessError } from '@kit.BasicServicesKit';
import { Developer } from '../model/Developer';
import { Recommend } from '../model/Recommend';

PersistentStorage.persistProp<string>("token", "");

@Entry
@Component
struct Index{
  scroller: Scroller = new Scroller();
  @State url: string = "https://openatom.atomgit.com/api/developer/recommend_list";
  @State info: Developer | null = null;

  build() {
    Scroll(this.scroller) {
      Column(){
        ForEach(this.info?.records,(rec:Recommend,index)=>{
          Column(){
            Text(rec.nickname)
            Image(rec.photo).width(50)
            Text(rec.userId)
            Text(rec.username)
            Text(rec.jump)
          }
        })
      }.width('100%')
    }
  }
  aboutToAppear(): void {
    this.getOrgList();
  }
  async getOrgList() {
    interface RequestParam {
      pageSize: number;
      pageNum: number;
      isSelected: number;
    }
    const param: RequestParam = {
      pageSize: 10,
      pageNum: 1,
      isSelected: 0
    };
    axios.post(this.url, param, {
      headers: {
        "X-ATOMGIT-POP-COMMUNITY": "openatom"
      }
    }).then((ret: AxiosResponse) => {
      this.info=ret.data["data"];
      console.log(`请求结果：${JSON.stringify(ret.data["data"])}`);
    }).catch((error: BusinessError) => {
      console.error(`请求异常：${JSON.stringify(error)}`);
    })
  }
}