【芙莉莲教你写代码】元服务 DevEco Studio 第五章 接口解析
2024-11-30 20:17:53
20次阅读
0个评论
1、网络图片加载
Image('https://file.atomgit.com/uploads/user/default.png').width('100%').height('30%')
2、安装axios库
ohpm install @ohos/axios
加载完毕后引入axios import axios, { AxiosResponse } from '@ohos/axios';
3、对http的请求概述
应用通过HTTP发起一个数据请求,支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。
HTTP数据请求功能主要由http模块提供。
使用该功能需要申请ohos.permission.INTERNET权限。
配置设置 , "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ]
4、model模型创建
创建model文件夹 创建model.ets文件
city:string;
country:string;
street:string;
}
export interface Users {
address:AddRess;
age:number;
email:string;
id:number;
name:string;
phone_numbers:string;
}
5、GET请求示例
引包操作
import { ApiResult } from '../model/ApiResult';
import { Users } from '../model/Users';
import { BusinessError } from '@kit.BasicServicesKit';
返回数据
@State info: Users[] | null = null;
GET请求函数
* 异步加载get请求
*/
async queryUsers() {
try {
const url = "http://39.107.126.100:5000/getInfo";
// 返回数据类型
const result: AxiosResponse<Users[]> =
await axios.get<ApiResult<Users[]>, AxiosResponse<Users[]>, null>(url);
this.info=result.data;
} catch (error) {
const err = error as BusinessError;
}
}
6、POST请求示例
遍历展示数据
import { BusinessError } from '@kit.BasicServicesKit';
import { Developer } from '../model/Developer';
import { Recommend } from '../model/Recommend';
PersistentStorage.persistProp<string>("token", "");
@Entry
@Component
struct ShowIndex {
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)}`);
})
}
}
22
- 0回答
- 2粉丝
- 1关注
相关话题
- 【芙莉莲教你写代码】元服务 DevEco Studio 第二章 页面与布局
- 【芙莉莲教你写代码】元服务 DevEco Studio 第三章 布局基础
- 【芙莉莲教你写代码】元服务 DevEco Studio 第四章 基础控件
- 【芙莉莲教你写代码】元服务 DevEco Studio 第一章 环境与示例
- 第五章接口解析示例
- 元服务——接口解析
- 元服务——5、接口解析
- 学习元服务基础—— DevEco Studio
- 接口解析
- 接口解析
- 元服务--第一章环境
- 最新 HUAWEI DevEco Studio 调试技巧
- # 最新 HUAWEI DevEco Studio 使用技巧
- 最新 HUAWEI DevEco Studio 使用技巧
- 最新 HUAWEI DevEco Studio 调试技巧