Promise封装
发布日期:2022-02-08 04:21:01
浏览次数:2
分类:技术文章
本文共 3453 字,大约阅读时间需要 11 分钟。
仅展示封装,详细看的Promise板块。
class Promise1 { status = "pending"; constructor(fn) { fn(this.resolve.bind(this), this.reject.bind(this)); } resolve(result) { if (this.status !== "pending") return; var ids = setTimeout((function () { this.setVal("resolve", result); clearTimeout(ids); }).bind(this), 0); } reject(error) { if (this.status !== "pending") return; var ids = setTimeout((function () { this.setVal("reject", error); clearTimeout(ids); }).bind(this), 0); } then(_resolve, _reject) { this._resolve = _resolve; this._reject = _reject; } catch(_reject) { this._reject = _reject; } setVal(_status, arg) { this.status = _status; if (_status === "resolve" && this._resolve) { this._resolve(arg); } else if (_status === "reject" && this._reject) { this._reject(arg); } }}// // 创建-实例化对象// var p = new Promise1(function (resolve, reject) { // var img = new Image();// img.src = "./img/3-.jpg";// img.onload = function () { // resolve(img);// }// img.onerror = function () { // reject(img.src);// }// })// // 使用// p.then(function (img) { // console.log(img);// }, function (msg) { // console.log(msg);// })// 创建-函数式function loadImage(){ return new Promise1(function(resolve,reject){ var img=new Image(); img.src="./img/3-.jpg"; img.onload=function(){ resolve(img); } img.onerror=function(){ reject(img.src); } })}// 使用loadImage().then(function(img){ console.log(img);},function(msg){ console.log(msg);})
后补-------------------------
class MyPromise { status = "pending"; constructor(fn) { fn(this.resolve.bind(this), this.reject.bind(this)); } resolve(result){ if(this.status!=="pending")return; let ids=setTimeout((function(){ this.setVal("resolve",result); clearTimeout(ids); }).bind(this),0) } reject(error){ if(this.status!=="pending")return; let ids=setTimeout((function(){ this.setVal("reject",error); clearTimeout(ids); }).bind(this),0) } then(_resolve,_reject){ this._resolve=_resolve; this._reject=_reject; return this; } catch(_reject){ this._reject=_reject; return this; } setVal(_status,arg){ this.status=_status; if(_status==="resolve"&&this._resolve){ this._resolve(arg); }else if(_status==="reject"&&this._reject){ this._reject(arg); } }}// 图片预加载// 定义function loadImg(){ return new MyPromise((resolve,reject)=>{ let img =new Image(); img.src="./img/timg.jpg"; img.onload=function(){ resolve(img) } img.onerror=function(){ reject(img.src) } })}// 使用方式一// loadImg().then(function(img){ // console.log(img);// },function(msg){ // console.log(msg);// })// 使用方式二loadImg().then((image)=>{ console.log(image)}).catch((err)=>{ console.log(err);})console.log("-------")//能发现这行代码先打印
能发现console.log("-------")
这行代码先打印,因为promise是异步的,上面使用延时器就是为了保证代码的执行顺序,让resolve和reject的处理异步执行。
转载地址:https://blog.csdn.net/weixin_43297321/article/details/104422348 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年03月05日 15时54分56秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
全国省市区 mysql_2017全国省市区数据库【含三款数据库】
2019-04-21
mysql 怎样链接jdbc_jdbc怎么链接mysql数据库
2019-04-21
java exec封装_Java 执行系统命令工具类(commons-exec)
2019-04-21
python中两个时间相减结果转为小时_Python起步(二)基础数据类型1
2019-04-21
定义泛化。举个例子_网易考拉应用的dubbo泛化调用,是如何实现的?
2019-04-21
mysql里可以用cube吗_sql server的cube操作符使用详解_mysql
2019-04-21
php mysql 图书_使用PHP+MySQL来对图书管理系统进行构建
2019-04-21
单片机c语言 int1,51单片机into、int1中断计数c语言源程序.doc
2019-04-21
c语言课程设计工资管理建库,C语言课程设计工资管理系统参考.doc
2019-04-21
c51写c语言外部ram头文件,C51中访问外部RAM的方法
2019-04-21
c语言打开一个html文件路径,C语言文件处理-C语言文件的打开和关闭
2019-04-21
普职融通信息技术课本C语言,“三步走”扎实推进“普职融通”办学新模式
2019-04-21