JS简单实现Promis（没有实现then链调用）

// 实现Promise
function _Promise(fn){// 要求接收的fn必须是一个函数，否则报错if(typeof fn !== 'function') {throw new TypeError('_Promise resolver undefined is not a function')}// 每个实例应该有这两个属性：state，resultthis.state = 'pending'; // 初始状态为 pendingthis.result = undefined;  // 初始结果为 undefined// 事件池(自定义)：这里存放的是then中传递的A函数和B函数this.eventPool = {A: function(){},B: function(){}}// 立即执行传递进来的fn函数：但是在执行fn的时候得给fn床底两个函数 resolev，rejectvar that = this;function resolve(res){ // 这里接收一个参数，作为当前实例的result值// 执行这个函数的时候会将当前实例的状态从 pending转为 resolved/* if(that.state !== 'pending') return;that.state = 'resolved';that.result = res; */change('resolved', res)}function reject(rej){// 这里接收一个参数，作为当前实例的result值// 执行这个函数的时候会将当前实例的状态从 pending转为 rejected/*  if(that.state !== 'pending') return;that.state = 'rejected';that.result = rej; */change('rejected', rej)}// resolve函数和reject函数代码冗余，整合成一个function change(state, result){// 如果状态已经不是初始状态了，则直接退出，否则改变其状态和结果，并同时事件池中对应的函数执行if(that.state !== 'pending') return; that.state = state;that.result = result;// 通知事件执行时异步的setTimeout(function(){that.state === 'resolved'? that.eventPool.A(that.result): that.eventPool.B(result);})}// 注意：执行fn的时候，如果有报错，则当前实例的状态为失败，值为失败的原因try{fn(resolve, reject); }catch(err){change('rejected', err);}
}// _Promise的原型上有一个then方法，该方法接收两个函数A和B，根据实例的状态自动识别执行A还是B
_Promise.prototype.then = function(A, B){// this：当前_Promise的实例this.eventPool.A = A;this.eventPool.B = B;
}// 快速创建一个状态为成功的实例
_Promise.resolve = function(res) {return new _Promise(function(resolve){resolve(res)});
};// 快速创建一个状态为失败的案例
_Promise.reject = function(res) {return new _Promise(function(undefined, rejecte){rejecte(res)});
};let p = new _Promise(function(resolve, reject){// resolve(200);reject(300);
});p.then(res=>{console.log(res);
}, rej=>{console.log(rej);
});_Promise.resolve(200).then(res=>{console.log(res)
});_Promise.reject(400).then(res=>{}, rej=>{console.log('失败', rej)
});console.log('同步');
/* * 输出结果：同步300200失败 400
*/

JS简单实现Promis（没有实现then链调用）相关推荐

web前端面试高频考点——JavaScript 篇（一）【JS的三座大山】原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
EChart.js 简单入门
EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
Py：python利用easygui实现最简单GUI带你学习区块链技术的发展和由来
Py:python利用easygui实现最简单GUI带你学习区块链技术的发展和由来目录输出结果实现代码输出结果实现代码 # -*- coding: utf-8 -*- ''' Created ...
js简单验证码的生成和验证
如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div><table border="0" cellspacing="5&quo ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
js 简单的滑动教程（四）
作者:Lellansin 转载请标明出处,谢谢在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程前几篇中的代码,还存在着bug, ...
php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下本文实例讲述了JS简单获取并修改in ...
H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...
js简单交互动画，运动吧
今天看了一下慕课网上讲解js简单动画的视频教程,讲解确实挺细致的,大家可以去慕课网搜一下.OK,下面的内容就是我的学习总结,以方便日后的"回访",哈哈!由于是总结,我就不贴完整的源 ...

JS简单实现Promis（没有实现then链调用）

JS简单实现Promis（没有实现then链调用）

JS简单实现Promis（没有实现then链调用）相关推荐

最新文章

热门文章