鸿蒙的json数据传输模式的axios类
·
代码如下:
try {
const res: AxiosResponse<Order> =
await axios.post('http://localhost:8080/api/order/update', order);
console.log("res",JSON.stringify(res));
console.log("res.data", res.data); // 只打印数据部分
this.resp = `更新成功:\n${JSON.stringify(res.data, null, 2)}`;
} catch (err) {
this.resp = `更新失败:${err}`;
}
完整的例子代码如下:
import axios, { AxiosResponse } from '@ohos/axios';
import { shippingAddress } from '@kit.AccountKit';
interface user1{
id:number
name:string
}
interface address1{
city:string
street:string
}
interface Order {
id: number;
user: user1;
address: address1;
}
@Entry
@Component
struct OrderUpdatePage {
@State orderId: string = '';
@State itemName: string = '';
@State city: string = '';
@State street: string = '';
@State user: user1 = {} as user1;
@State address: address1 = {} as address1;
@State resp: string = '等待服务器响应…';
// ======================
// 1. 查询订单
// ======================
loadOrder = async () => {
if (!this.orderId) {
this.resp = '请输入订单号';
return;
}
try {
const res: AxiosResponse<Order> =
await axios.get(`http://localhost:8080/api/order/${this.orderId}`);
console.log("res1",JSON.stringify(res))
const data = res.data;
this.itemName = "ko";
this.user = data.user;
this.address = data.address;
this.address.city=data.address.city
this.resp = `查询成功:\n${JSON.stringify(data, null, 2)}`;
} catch (err) {
this.resp = `查询失败:${err}`;
}
}
// ======================
// 2. 修改订单
// ======================
updateOrder = async () => {
this.resp='ok'
const order: Order = {
id: Number(this.orderId),
user: this.user,
address:this.address
};
try {
const res: AxiosResponse<Order> =
await axios.post('http://localhost:8080/api/order/update', order);
console.log("res",JSON.stringify(res));
console.log("res.data", res.data); // 只打印数据部分
this.resp = `更新成功:\n${JSON.stringify(res.data, null, 2)}`;
} catch (err) {
this.resp = `更新失败:${err}`;
}
};
build() {
Column({ space: 14 }) {
Text('订单管理')
.fontSize(26)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 18 });
// 输入订单号
TextInput({ placeholder: '订单号', text: $$this.orderId })
.type(InputType.Number)
Button('查询订单')
.width('100%')
.height(44)
.onClick(this.loadOrder)
// 修改字段
TextInput({ placeholder: '订单', text: $$this.orderId });
TextInput({ placeholder: '商品名', text: $$this.itemName });
TextInput({ placeholder: '用户id', text: $$this.user.id })
TextInput({ placeholder: '用户name', text: $$this.user.name })
// TextInput({ placeholder: '用户', text: $$this.user })
TextInput({ placeholder: 'address.city', text: $$this.address.city })
TextInput({ placeholder: 'address.street', text: $$this.address.street })
Button('更新订单')
.width('100%')
.height(34)
.onClick(this.updateOrder)
// 服务端回显
Text('服务器回显:')
.fontSize(16)
.fontWeight(FontWeight.Medium)
Scroll() {
Text(this.resp)
.fontSize(14)
.padding(10)
.backgroundColor('#F5F5F5')
.borderRadius(8)
.maxLines(999)
.textOverflow({ overflow: TextOverflow.Clip });
}
.height('45%')
.width('100%')
}
.padding(20)
.width('100%')
.height('100%')
.backgroundColor('#FFFFFF');
}
}
更多推荐


所有评论(0)