1.定义函数getListJson函数返回一个封装了异步操作的Promise实例
Promise接受一个函数作为参数，函数的两个参数分别是有javascript引擎提供的resolve和reject函数。
const getListJSON = url => {
return new Promise((resolve, reject) => {
let client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
function handler(){
if(this.readyState !==4){
return;
}
if(this.status === 200){
setTimeout(() => resolve(this.response), 1000);
// resolve(this.response);
}else{
reject(new Error(this.statusText));
}
}
});
}
2.在组件生命周期函数componentDidMount中调用getListJson并且更新组件state
componentDidMount(){
let _this = this;
//获取新车数据
getListJSON(_this.props.dataurl).then(function(res){
if(res && res.result){
_this.setState({
listdata: res.result
});
}
}, function(error){
console.log(error);
});
}
在getListJson().then的回调函数中直接使用this会出现指针错误，所以在外部定义let _this = this;后使用_this.setState()更新组件状态。
