小白用vue写项目的心路历程,promise篇

这一次讲一下异步处理,异步处理在实战中非常实用,也是面试中必问的问题,接下来我先介绍一下作为一个啥也不懂的小白在初次遇到异步时的处理,我在每次请求数据的时候,因为请求是异步所以我起初是通过设置定时器来处理异步,一开始的确是达到了目的,但是后来需要按顺序处理异步请求的数据,这时候定时器的弊端就显露出来了,另一方面在紧凑的异步处理的情况下,定时器也可能会在请求完成之前就结束(由于网络问题),所以这个方法是不可取的,这个时候其实我已经学过promise了我在学es6的时候,最难的就是promise,视频和其他人的博客看了五六遍才把原理了解了,后来又找了MDN、廖雪峰的网站去看了promise结合之前看的promise视频才把原理弄明白。
这里我先讲一下我对promise的理解,promise就是一个状态集,他有三个状态,初始状态为pending,可以转变成resolve或reject状态,状态一旦被改变,就不能在被更改。另外promise可以链式调用,而且执行顺序是同步的,链式调用是通过.then()返回promsie对象来实现的,接下来我们一起来封装一个自己理解的promise对象

class promise{
    constructor(fn){
        if(typeof fn !== 'function'){//判断参数是不是一个函数
            throw new Error('this is not funtion');
        }
        try{//改变回调函数的参数的this指向,使promise可以保存状态信息
            fn(this.resolve.bind(this),this.reject.bind(this))
        }catch(err){
            this.reject(err);
        }
        this.status = 'pending';
        this.value = '';
        return this;
    }
    then(onresolve,onreject){
        if(this.status === 'resolve'){
            onresolve(this.resolveData)
            return this;
        }else if(this.status === 'reject'){
            onreject(this.rejectData);
            return this;//实现链式调用
        }
    }
    resolve(data){
        if(this.status === 'pending'){//判断是不是初始状态
            this.status = 'resolve';//保存状态
            this.value = data;//保存成功回调参数
        }
        
    }
    reject(data){
        if(this.status === 'pending'){
            this.status = 'reject';//保存状态
            this.value = data;//保存失败回调参数
        }
        
    }
}

promise是目前解决异步的比较主流的方式,这里没有写出then的异步,如果我要让它变得像promise的话,我会加一个settimeout(fn(){},0)这样来实现异步,来模仿原版promsie,但是怕误导,而且我对promise源码研究的也不透彻,写博客主要为了和大家一起讨论,欢迎留言评论,共同进步。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值