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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,523评论 1 33
  • 本文适用的读者 本文写给有一定Promise使用经验的人,如果你还没有使用过Promise,这篇文章可能不适合你,...
    HZ充电大喵阅读 7,333评论 6 19
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,729评论 1 56
  • 培养目标:家长与孩子同学习共成长,培养专家型父母,让教育走向必然成功 ! 书苑宗旨:用快乐的方法去学习、用系统的方...
    大然小成阅读 731评论 0 0
  • 月在中天,下面云走的缓。----照着地塘,小孩子饱满的脸。旅店,没有电的夜晚,漫长夜里不停蔓延的冷。墙壁上路人...
    麻粒脸猛露阅读 234评论 0 0