让前端飞

简单实现 Promise 对象

2017-06-03  本文已影响0人  柏龙

Promise 是什么

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

Promise 原理

Promise对象有以下两个特点。

如果某些事件不断地反复发生,一般来说,使用 stream 模式是比部署Promise更好的选择。

Promise 常用方法

Promise 代码实现

/**
 * 简单实现 Promise
 */
class Promise {
    constructor(){
        this.callbacks = []; // 存入对象 [{}, {}, {}]
        this.oncatch = null;
    }

    then(onsuccess, onfial){
        this.callbacks.push({
            resolve: onsuccess,
            reject: onfial
        })
        return this;
    }
    // 成功处理
    resolve(result){
        this.complete('resolve', result)
    }

    reject(result){
        this.complete('reject', result)
    }

    complete(type, result){
        if(type === 'reject' && this.oncatch){
            this.callbacks = [];
            this.oncatch(result);
        }else if(this.callbacks[0]){
            let handlerObj = this.callbacks.shift();
            if(handlerObj[type]){
                handlerObj[type](result)
            }
            
        }

    }

    catch(onfail){
        this.oncatch = onfail;
        return this;
    }
}

let p = new Promise();
function fn1(){
    console.log('fn1...');
    setTimeout(function(){
        p.resolve('data1');
    }, 1000)
    return p;
}

function fn2(result){
    console.log('fn2', result);
    setTimeout(function(){
        p.resolve('data2'); // 执行第一个方法
        // p.reject('args'); // 执行第二个方法
    }, 1000)
}

function fn3(result){
    console.log('fn3', result);
    setTimeout(function(){
        p.resolve('data3...');
    }, 1000)
}

function fn4(result){
    console.log('data4...', result);
}

fn1().then(fn2, fn3).then(fn4);
fn1().then(fn2).then(fn3).catch(fn4);

// 参数 [{resolve: fn1, reject: undefined}, {resolve: fn2, reject: fn3}]

Promise异步读取文件

本文参考链接

上一篇 下一篇

猜你喜欢

热点阅读