手写实现一个promise

最新推荐文章于 2024-08-13 15:18:24 发布
最新推荐文章于 2024-08-13 15:18:24 发布
阅读量937 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29187355/article/details/79463868
版权

function myPromise (callback) {

let self = this;

self.status = 'pending';

self.value = undefined;

self.reason = undefined;

self.fullFiledArr = [];

self.rejectedArr = [];

function resolve (value) {

if(self.status == 'pending') {

self.value = value;

self.status = 'fufilled';

self.fullFiledArr.forEach(function(f) {

f.call(this,self.value)

});

}

}

function reject (reason) {

if(self.status == 'pending') {

self.reason = reason;

self.status = 'rejected';

self.rejectedArr.forEach(function(f) {

f(self.reason)

});

}

}

try{

callback(resolve,reject);

} catch(e) {

reject(e);

}

}

myPromise.prototype.then = function (onFufilled,onRejected) {

let self = this;

let myPromise2;

switch(self.status) {

case 'pending':

myPromise2 = new myPromise(function(resolve,reject) {

self.fullFiledArr.push(function(){

try{

let res = onFufilled(self.value);

if(res instanceof myPromise) {

res.then(resolve,reject);

}

// resolvePromise(myPromise,res);

} catch(e) {

reject(e);

}

})

self.rejectedArr.push(function(){

try{

let res = onRejected(self.reason);

if(res instanceof myPromise) {

res.then(resolve,reject);

}

} catch(e) {

reject(e);

}

})

});

break;

case 'fufilled':

myPromise2 = new myPromise(function(resolve,reject) {

try{

let res = onFufilled(self.value);

if(res instanceof myPromise) {

res.then(resolve,reject);

}

} catch(e) {

reject(e);

}

});

break;

case 'rejected':

myPromise2 = new myPromise(function(resolve,reject) {

try{

let res = onRejected(self.reason);

if(res instanceof myPromise) {

res.then(resolve,reject);

}

} catch(e) {

reject(e);

}

})

}

return myPromise2;

}

 

function resolvePromise(promise,x,resolve,reject){

if(promise===x){

throw new TypeError("type error")

}

let isUsed;

if(x!==null&&(typeof x==="object"||typeof x==="function")){

try{

let then=x.then;

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

//是一个promise的情况

then.call(x,function(y){

if(isUsed)return;

isUsed=true;

resolvePromise(promise,y,resolve,reject);

},function(e){

if(isUsed)return;

isUsed=true;

reject(e);

})

}else{

//仅仅是一个函数或者是对象

resolve(x)

}

}catch(e){

if(isUsed)return;

isUsed=true;

reject(e);

}

}else{

//返回的基本类型，直接resolve

resolve(x)

}

}


 

const async1 = () => {

var p = new myPromise((resolve,reject)=> {

console.log('1');

setTimeout(()=>{

resolve('链式调用1');

},1000)

})

return p;

}

const async2 = () => {

var p = new myPromise((resolve,reject)=> {

console.log('2');

setTimeout(()=>{

resolve('链式调用2');

},1000)

})

return p;

}

 

async1().then((data) => {

console.log(data);

return async2();

}).then((data)=>{

console.log(data);

})

 

Month7
关注
专栏目录
教你如何手写一个Promise
ose_huang的博客
02-25 9643
promise的进阶，手写一个自己的promise
带大家如何实现一个手写 Promise
明平姚的博客
07-24 446
带大家实现一个自定义promise
手写实现一个Promise
web分享客的博客
04-09 607
function NewPromise (fn) { this.state = 'pending' this.fulfillList = [] this.rejectList = [] fn(this.resolve.bind(this), this.reject.bind(this)) // 成功执行成功的队列 } NewPromise.proto...
超详细！全面搞懂手写Promise其过程
最新发布
书呆子ITme
08-13 1416
Promise是JavaScript中用于处理异步操作的一种方式。它提供了一种简洁且强大的方法来处理异步代码，避免了方法回调。本文将详细讲解如何从零开始手写一个Promise，帮助您深入理解其工作原理。PromisePending（待定）：初始状态，既不是成功也不是失败。Fulfilled（已兑现）：操作成功完成。Rejected（已拒绝）：操作失败。通过手写Promise，我们深入了解了其内部工作原理。希望这篇技术文档对您理解Promise有所帮助。如果在实践中遇到问题，建议参考ES6标准中的。
手写实现一个自己的promise
吃瓜群众的博客
03-27 351
function myPromise(constructor) { let self = this; self.status = "pending"; self.value = undefined; self.reason = undefined; self.then = function (fullfill, reject) { swit...
Promise
亚洲的博客
11-24 303
Promise 名词约定 一般来讲，有以下的名词约定： promise(首字母小写) 对象指的是“Promise实例对象” Promise 首字母大写且单数形式，表示“Promise构造函数” Promises 首字母大写且复数形式，用于指代“Promises规范” 什么是Promise? Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败） Promise是一
手写一个promise用法_手写一个Promise
weixin_28757113的博客
12-31 324
首先要确定Promise的几个特点Promise就是一个类，在执行这个类的时候需要传递一个执行器进去，执行器会立即执行Promise有三个状态，分别为 成功 fulfilled 失败 rejected 等待pending (pending=>fulfilled pending=>rejected) 一旦状态确定就不可更改resolve 和reject函数是用来更改状态的 resolv...
JS手写一个自定义Promise操作示例
11-21
在本实例中，我们将学习如何手写一个自定义的Promise，即`MyPromise`。 首先，我们创建了一个名为`MyPromise`的类，它接受一个`executor`函数作为参数。`executor`函数会在Promise实例创建后立即执行，并且它有两个...
300秒带你手写一个promise
小陈的博客
05-18 6059
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
手写一个自己的Promise
qq_38011050的博客
09-18 655
常言道：“知其然，更要知其所以然” 所谓JS本身是“函数式，异步”编程（回调地狱，你懂的），Promise得出现，让JS写起来好像是“同步编程”得感觉了！ 下面是基于我自己对Promise得理解，用ES6语法写了一个Promise // 既然Promise使用得时候是通过new得到的，那么首先分析出Promise是一个类 class Promise2 { // Promise接收一个回调函...
手写一个简单的Promise
u011393161的博客
11-22 3506
今天突发奇想，想自己写个Promise来玩，一说要写还真反应不过来怎么开始，总之先看看Promise是怎么用的好了。 let pp= new Promise((resolve, reject) => { resolve('done'); }); pp.then((value) => { console.log(value); }).catch((e)=>{ cons...
手写Promise
XunLin233的博客
05-30 1978
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
自己手写一个Promise
Luckyzhoufangbing的博客
04-30 244
methods: { getData (username, password) { const login = new Promise((resolve, reject) => { if (username === 'zhou' && password === '123') { resolve({ code: 0, m...
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7785
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
手写一个简单的promise方法
qq_37953045的博客
06-21 195
手写一个简单的promise方法
手写实现简单的promise
weixin_34348111的博客
04-30 1079
手写promise几乎每家大厂的必备考题，几次面试都被这个问题坑了，于是花了些时间特意研究了一下，下面是promise实现的思考过程。大家如果不嫌弃，还请往下看： promise的介绍 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 例如以下一个promise的例子： con...
手写一个promise
weixin_40821790的博客
07-24 668
class Qromise { constructor(fn) { this.status = 'pending' this.error = '' this.data = '' try{ fn(this.onFullfilled.bind(this), this.onRejected.bind(th...
手写一个promise实现
06-08
好的，以下是一个简单的手写Promise实现： ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; this.value = null; this.reason = null; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach((callback) => callback(this.value)); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach((callback) => callback(this.reason)); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value; onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; }; const promise2 = new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } else if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } else { this.onFulfilledCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return promise2; } catch(onRejected) { return this.then(null, onRejected); } resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { reject(new TypeError('Chaining cycle detected')); } let called = false; if (x instanceof MyPromise) { x.then((value) => { this.resolvePromise(promise2, value, resolve, reject); }, (reason) => { if (!called) { called = true; reject(reason); } }); } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call(x, (value) => { if (!called) { called = true; this.resolvePromise(promise2, value, resolve, reject); } }, (reason) => { if (!called) { called = true; reject(reason); } }); } else { resolve(x); } } catch (error) { if (!called) { called = true; reject(error); } } } else { resolve(x); } } static resolve(value) { return new MyPromise((resolve) => { resolve(value); }); } static reject(reason) { return new MyPromise((resolve, reject) => { reject(reason); }); } static all(promises) { const results = []; return new MyPromise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { const promise = promises[i]; if (!(promise instanceof MyPromise)) { promise = MyPromise.resolve(promise); } promise.then((value) => { results[i] = value; if (results.length === promises.length) { resolve(results); } }, (reason) => { reject(reason); }); } }); } static race(promises) { return new MyPromise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { const promise = promises[i]; if (!(promise instanceof MyPromise)) { promise = MyPromise.resolve(promise); } promise.then((value) => { resolve(value); }, (reason) => { reject(reason); }); } }); } } ``` 这个实现包含了Promise的基本功能，包括resolve、reject、then、catch、resolvePromise等方法，并且还实现了Promise.all和Promise.race方法。但是这个实现并不完整，还有很多细节需要考虑和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值