• 实现一个简易的promise


    //promise里面只有三个状态,且三个状态的转换形式有两种
    //由pending转换为fulfilled,由pending转换为rejected
    
    //Promise的构造函数参数是一个函数,函数的参数分别为resolve和reject,两者也均为一个函数
    //then中是实际要执行的函数,将传递进来的值传给resolve和reject对应的参数
    const PENDING = 'PENDING'
    const FULFILLED = 'FULFILLED'
    const REJECTED = 'REJECTED'
    class YPromise {
        constructor(cb) {
            this.state = PENDING;
            this.value = null;
            //承诺完成的回调列表
            this.fulfilledCbs = [];
            //承诺被拒绝的回调列表
            this.rejectedCbs = [];
    
            let resolve = data => {
                setTimeout(() => {
                    if (this.state !== PENDING) return;
                    //更改状态
                    this.state = FULFILLED;
                    this.value = data;
                    this.fulfilledCbs.forEach(c => {
                        this.value = c(this.value);
                    })
    
                }, 0);
    
            }
            let reject = reason => {
                setTimeout(() => {
                    if (this.state !== PENDING) return;
                    this.state = REJECTED;
                    this.reason = reason;
                    this.rejectedCbs.forEach(c => {
                        this.reason = c(this.reason);
                    })
    
                }, 0);
            }
            cb(resolve, reject);
        };
        then(onFulfilled, onRejected) {
            if (typeof onFulfilled === 'function') {
                this.fulfilledCbs.push(onFulfilled);
            }
            if (typeof onRejected === 'function') {
                this.rejectedCbs.push(onRejected);
            }
            return this;//返回整个构造函数可以继续调用then方法
        }
    }
    
    let promise = new YPromise((resolve, reject) => {
        if (4 > 1) {
            resolve('hi');
        } else {
            reject(4大于1')
        }
    })
    
    fulfilledCbs = [data => data + 'world']
    promise.then(data => {
        return data + ' world';
    }).then(data => {
        return data + '!';
    }).then(data => {
        console.log(data);
    })
  • 相关阅读:
    Toolbar设置回退箭头的方法
    Android进程绝杀技--forceStop
    线程池的经典使用
    Handler+ExecutorService(线程池)+MessageQueue模式+缓存模式
    adb pull apk
    工厂模式_工厂方法模式
    工厂模式_简单工厂模式
    spring_aop
    代理模式_动态代理
    代理模式_静态代理
  • 原文地址:https://www.cnblogs.com/yinping/p/11249728.html
Copyright © 2020-2023  润新知