版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/HYB2012/article/details/79250386
Promise封装axios数据查询
github个人博客源码持续更新中。。。
小白在实施的过程中,前端请求数据刷新数据遇到了数据同步的问题。
- 数据请求方法
getAtricles() {
console.log("getAtricles")
const url = `${CONFIG.server}/api/article/queryall`
var result;
console.log(url)
axios.post(url)
.then(function(response) {
if (response.data.status == -1) {
message.info(response.data.msg);
} else {
console.log("查询成功")
return response.data.result;
}
})
.catch(function(error) {
message.info(error);
})
}
- 状态刷新方法
reloadData = () => {
this.setState({
loading: true
});
console.log("开始查询");
let atricles = this.getAtricles();
console.log(atricles);
let data = [];
console.log("结果映射");
atricles.map((item, index) => {
data.push({
key: item._id,
index: index,
title: item.title
});
})
console.log("更新状态");
this.setState({
selectedRowKeys: [],
loading: false,
data: data
});
}
执行后结果
- 开始查询
- undefined
- 结果映射
- ×××报错
- 查询成功
未待查询结果返回,就执行了状态刷新,故 console.log(atricles)会出现undefined
- 解决方法
查阅资料后,用Promise解决此问题
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
数据请求方法返回promise
getAtricles() {
console.log("getAtricles")
const url = `${CONFIG.server}/api/article/queryall`
var result;
var promise = new Promise((resolve, reject)=> {
console.log(url)
axios.post(url)
.then(function(response) {
if (response.data.status == -1) {
message.info(response.data.msg);
} else {
console.log("查询成功")
resolve(response.data.result);
}
})
.catch(function(error) {
message.info(error);
})
})
return promise;
}
状态刷新方法在resolve中执行,个人理解resolve,reject都是一种回调函数callback
reloadData = () => {
this.setState({
loading: true
});
console.log("开始查询");
const promise = this.getAtricles();
promise.then(atricles => {
console.log(atricles);
let data = [];
if (!atricles) return;
console.log("结果映射");
atricles.map((item, index) => {
data.push({
key: item._id,
index: index,
title: item.title
});
})
console.log("更新状态");
this.setState({
selectedRowKeys: [],
loading: false,
data: data
});
}).catch((error) => {
message.error(error)
});
}
- 执行结果
- 开始查询
- 查询成功
- atricles [Object]
- 结果映射
- 更新状态