使用Promise实例 获取模拟数据

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()更新组件状态。