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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:js 二叉树封装成类
下一篇:jQuery 表格选中颜色变化

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月05日 15时54分56秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

mysql server卸载出错_Mysql卸载问题Start Server卡住报错解决方法 2019-04-21
全国省市区 mysql_2017全国省市区数据库【含三款数据库】 2019-04-21
druid加载MySQL驱动原理_你好,想知道mybatis+druid+jdbc 原理介绍? 2019-04-21
mysql 怎样链接jdbc_jdbc怎么链接mysql数据库 2019-04-21
mysql学生课程表试题_Mysql练习之 学生表、课程表 、教师表、成绩表 50道练习题... 2019-04-21
java exec封装_Java 执行系统命令工具类(commons-exec) 2019-04-21
php sha512解密,PHP加密函数 sha256 sha512 sha256_file() sha512_file() 2019-04-21
python-docx tables后追加内容_Mac brew安装MySQL8.0.21后忘记密码(重置密码篇) 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
c语言case中途跳出,break语句在switch结构语句中的作用是终止某个case,并跳出switch结构语句。... 2019-04-21
c51写c语言外部ram头文件,C51中访问外部RAM的方法 2019-04-21
51c语言产生随机证书,基于51单片机的随机数产生器设计-LCD1602-KEY-(电路图+程序源码)... 2019-04-21
C语言编写程序计算高考倒计时天数,基于51单片机LCD12864大字符校时万年历带高考倒计时程序... 2019-04-21
c语言打开一个html文件路径,C语言文件处理-C语言文件的打开和关闭 2019-04-21
普职融通信息技术课本C语言,“三步走”扎实推进“普职融通”办学新模式 2019-04-21