码迷,mamicode.com
首页 > 其他好文 > 详细

手写Promise

时间:2020-06-07 19:51:55      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:存在   捕捉异常   foreach   初始   调用   fun   require   ==   简单   

let Promise = require(‘./myPromise‘);         //导入自己实现的类

【1】简单resolve() reject() throw new Error(‘error’)

// 构造函数中核心步骤

try {

executorCallback(resolve, reject);

        } catch (e) {

//executorCallback执行发生异常,当前状态设置

console.log(‘捕捉异常‘);

reject(e);

        }

//更新状态

function resolve(value) {

if (_this.status === ‘pending‘) {

_this.status = ‘resolved‘; //成功状态

_this.value = value;

            };

        };

function reject(reason) {

if (_this.status === ‘pending‘) {

_this.status = ‘rejected‘; //失败状态

_this.reason = reason;

            };

        };

//成员方法

//实例方法then

then(onFufilled, onRejected) {

if (this.status === ‘resolved‘) {

onFufilled(this.value);

        }

if (this.status === ‘rejected‘) {

onRejected(this.reason);

        }

    };

【2】构造函数中延迟问题

//箭头函数:不存在this

let p1 = new Promise((resolve, reject) => {

//resolve(2);

// reject(1); //当前所处环境为默认this

// throw new Error(‘error‘);

//setTimeout(resolve(2), 1000);

setTimeout(() => {

resolve(2);

    }, 1000);

});

=================

需要设置对应的resolve、reject

// 状态设置:只能从默认状态转为 rejected、resolved状态

function resolve(value) {

if (_this.status === ‘pending‘) {

_this.status = ‘resolved‘; //成功状态

_this.value = value;

_this.onResolvedCallbacks.forEach(element => element(value));

            };

        };

function reject(reason) {

if (_this.status === ‘pending‘) {

_this.status = ‘rejected‘; //失败状态

_this.reason = reason;

_this.onRejectedCallbacks.forEach(element => element(reason));

            };

        };

//同时,处理then方法

//实例方法then

then(onFufilled, onRejected) {

if (this.status === ‘resolved‘) {

onFufilled(this.value);

        }

if (this.status === ‘rejected‘) {

onRejected(this.reason);

        }

//then异步方法

if (this.status === ‘pending‘) {

this.onResolvedCallbacks.push(onFufilled);

this.onRejectedCallbacks.push(onRejected);

        }

    };

【3】实现promise的链式调用

核心代码:

//假定只存在这种情况

if (typeof then === ‘function‘) {

then.call(

x,

function(y) {

if (called) return;

called = true;

resolvePromise(promise2, y, resolve, reject);

                            },

function(error) {

if (called) return;

called = true;

reject(error);

                            });

                    }


promise 中异步体现在:

let p1 = new Promise((resolve, reject) => {

reject(3); // 与resolve()方法互斥,只能执行一个

resolve(3); //不是异步方法

});

//异步方法

p1.then(result => {

console.log(1);

}, reason => {

console.log(2);

});

console.log(4);

//执行输出4 然后才是then() ——体现异步!

//箭头函数内部是没有this,取得是所处环境得this


flex属性:设置 flex-grow, flex-shrinkflex-basis

flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目(flex增长系数)。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

flex-basis 指定了 flex 元素在主轴方向上的初始大小

手写Promise

标签:存在   捕捉异常   foreach   初始   调用   fun   require   ==   简单   

原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13061478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!