React 博客系列 (3) Promise异步更新React状态

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]

结果映射

更新状态