首页 > 其他分享 >手写Promise

手写Promise

时间:2023-05-11 18:13:13浏览次数:20  
标签:resolve const 队列 ._ state Promise reject 手写

//计录Promise的三种状态 const PENDING = "pending"; const FULFILLED = "fulfilled"; const REJECTED = "rejected";
//创建微队列,把传递的函数放到微队列 function runMicroTask(callback) {   if(process && process.nextTick) {     process.nextTick(callback); //将函数传递进来放到微队列,node环境   } else if (MutationObserver) {     //MutationObserver 浏览器微队列     const p = document.createElement("p"); //创建p标签     const observer = new MutationObserver(callback); //放入微队列     observer.observe(p, {       childList: true, //观察内部发送的变化     });     p.innerHTML = "1";   } else {     setTimeout(callback, 0); //等待0秒好执行   } }
//判断是不是promise function isPromise(obj){     return !!(         obj && typeof obj === 'object'         &&         typeof obj.then === 'function') }
class MyPromise1 {   //构造一个执行器(execute)   constructor(executor) {     //需要执行的状态:     this._state = PENDING;     this._value = undefined;     this._pushHandlers = [];//存放微队列的地方     //执行器有两个参数,成功,失败     executor(this._resolve.bind(this), this._reject.bind(this));   }   //更改任务状态   _changeState(newState, value) {     //添加if判断,只能发送第一个请求,后面请求不在执行     if (this._state !== PENDING) {       return;     }     this._state = newState;     this._value = value;     this._runHandlers();//重新执行   }   //创建一个函数,写入队列   _pushHandler(executor,state,resolve,reject){     this._pushHandlers.push({         executor,         state,         resolve,         reject     })   }   //根据实际情况执行队列   _runHandlers(){     //当前函数还在挂起,则不执行     if(this._state === PENDING){         return     }     //每次执行完一个队列后,将队列删除     while(this._pushHandlers[0]){         const handler = this._pushHandlers[0]//将队列赋值         this._runOneHandler(handler);//该函数操作该队列,操作完成后         this._pushHandlers.shift()//删除已操作过的队列     }   }
  //处理一个handler   _runOneHandler({executor,state,resolve,reject}){     //进入微队列     runMicroTask(()=>{         //状态不一致,则不执行         if(this._state !== state){             return;         }         //当函数名称不等于function         if(typeof executor !== 'function'){             //则将前一个的值给后面             this._state === FULFILLED ? resolve(this._value) : reject(this._value)             return;         }         try {             //取出executor里面的值             const relute = executor(this._value);             if(isPromise(relute)){                 //isPromise判断是不是Promist如果是,带着relute的值,看看是那个状态,将值给对应的resolve/reject                 resolve.then(resolve,reject)             }else{                 resolve(relute)//其他情况的话,直接输出该属性             }         } catch (error) {             reject(error)//如果错误,则打印错误         }     })   }
  //成功的方法   _resolve(data) {     this._changeState(FULFILLED, data);   }
  //失败的方法   _reject(fail) {     this._changeState(REJECTED, fail);   }
  //有状态后,肯定有then函数,then函数有两个参数,一个成功(onFulfilled),一个失败(onRejected)   then(onFulfilled, onRejected) {     return new MyPromise1((resolve, reject) => {         this._pushHandler(onFulfilled,FULFILLED,resolve,reject);//成功的         this._pushHandler(onRejected,REJECTED,resolve,reject);//失败的         this._runHandlers();//重新执行     });   } }


const pro = new MyPromise1((resolve, reject) => {    setTimeout(()=>{     resolve(1)    }) }); const pro2 = pro.then((data)=>{     console.log(data)   // throw 'abc';     return 123; }) setTimeout(()=>{     console.log(pro2) },1000) //const pro1 = pro.then(function A(){}) // setTimeout(()=>{ //     console.log(pro) //     console.log(pro1) // },1500) // pro.then( //     function A2(){}, //     function B2(){} // ) //console.log(pro)   //pro.then(function B1(){},function B2(){}) //console.log(pro)

标签:resolve,const,队列,._,state,Promise,reject,手写
From: https://www.cnblogs.com/wsx123/p/17391833.html

相关文章

  • 如何手写一个promise函数
    constPENDING='pending'constFULFILLED='fulfilled'constREJECT='rejected';classMyPromise{#state=PENDING#result=undefined#handler=[]constructor(executor){constresolve=(data)......
  • tensorflow实现mnist手写数字识别
    1.softmax函数在数学,尤其是概率论和相关领域中,归一化指数函数,或称Softmax函数,是逻辑函数的一种推广。它能将一个含任意实数的K维向量z“压缩”到另一个K维实向量σ(z)中,使得每一个元素的范围都在(0,1)之间,并且所有元素的和为1。该函数多用于多分类问题中。在多项逻辑回归和......
  • 手写分布式事务demo
    这个例子仿照seata的AT模式分布式事务产生: 其中localsql和other方法都是对当前服务数据库进行查询,但remoteMthod接口调用的远程服务库,单纯使用Spring的@Transactional注解无法回滚其他服务 ......
  • 一道Promise面试题,并对比向其代码中添加await关键字后的变化
    标准代码:(function(){console.log(1);window.setTimeout(()=>{console.log(2);},100);newPromise((resolve)=>{console.log(3);resolve();}).then(()=>{console.log(4);......
  • element-ui上传组件,before-upload发送异步请求 + Promise
    element-ui上传组件,before-upload发送异步请求+Promisebefore-upload为false的时候会阻止图片的上传但是和chenge事情一起不行可以:http-request="fnUploadRequest"<el-upload--snip--:before-upload="beforeAvatarUpload"--snip--......
  • 跟着B站手写redux
    来,跟我一起手写Redux!(建议2倍速播放)_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1dm4y1R7RK/?spm_id_from=333.788&vd_source=fdb6783d7930065bbf3d29c851463887 //src目录结构│App.jsx│index.jsx│redux.jsx│style.css│└─connectersconnectT......
  • LeetCode 周赛 344(2023/05/07)手写递归函数的固定套路
    本文已收录到AndroidFamily,技术和职场问题,请关注公众号[彭旭锐]提问。大家好,我是小彭。今天下午有力扣杯战队赛,不知道官方是不是故意调低早上周赛难度给选手们练练手。往期周赛回顾:LeetCode单周赛第343场·结合「下一个排列」的贪心构造问题周赛概览T1.找出不......
  • 第10章:10W QPS真刀实操__以及基于ZK+Netty手写分布式测试工具 177手机路人甲账号 主目
    10WQPS真刀实操__以及基于ZK+Netty手写分布式测试工具参考链接系统架构知识图谱(一张价值10w的系统架构知识图谱)https://www.processon.com/view/link/60fb9421637689719d246739秒杀系统的架构https://www.processon.com/view/link/61148c2b1e08536191d8f92f10WQPS真刀实......
  • Promise学习
    1.理解1)Promise是一门新技术(ES6规范)2)Promise是JS中进行异步编程的新解决方案 2.具体表达1)从语法上说:Promise是一个构造函数,2)从功能上说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值支持链式调用,解决回调地狱问题,回调函数中多次嵌套。 3.Promise......
  • 23-1 期中测试 | 动手写一篇你自己的设计文档吧!
    你好,我是李智慧。现在课程已经过半,我们已经学习了8个典型应用的架构设计,不知你对软件建模和设计文档掌握了多少,又对架构设计有了哪些思路呢?回到我们这个专栏的目的:一个是了解典型的高并发系统架构是如何设计的;另一个就是熟悉架构设计文档的写法和设计建模的方法。所以,我期望你......