promise简单实现

本文介绍了Promise的基本概念,特点和作用,包括其状态机的三种状态:pending、fulfilled和rejected。Promise提供了all、race、resolve、reject等方法以及then、catch、finally等链式调用方法。通过示例,解释了如何实现一个简单的Promise,强调了异步调用和错误处理的重要性,同时也提到了all和race方法的行为。最后,文章提到了done方法用于处理未被捕获的错误,并提供了参考文档链接。
摘要由CSDN通过智能技术生成

Promise

promise 是一个构造函数,他的参数是一个 function,new promise()时传入的函数会立即执行

  • 特点:维护一个状态机,有 pending,fulfilled,rejected 三种状态,一旦状态改变了后不会再变
  • 作用:链式调用,避免回调函数结构复杂
  • 结构: Promise 中有 all,race,resolve,reject 等方法,Promise.prototype 有 then,catch,finally 等方法



all()

  • 接受 promise 对象,返回所有对象 resolve 的结果,返回结构为数组,是一个 promise 实例
  • 若有 reject,则返回最先 rejected 状态的 reject 结果

race()

  • 返回最先 resolve 或最先 reject 的结果,返返回 promise

then()

  • 接受两个参数,两个参数分别为两个函数,返回 promise 对象
  • 参数一:resolve 时执行;参数二:reject 执行

catch()

  • 接受 reject 参数
  • 也接受发生异常时调用的参数

finally()

  • 无论状态是什么都会执行的函数


实现

  1. 基础框架
function MyPromise(fn){
   function resolve(data){
       console.log(data)
   }

   function reject(data){
       console.log(data)
   }

  try{
   fn(resolve,reject)
  }catch(e){
      reject(e)
  }

}
  1. 添加状态机
const PENDING = 'pending'
const FULFILLED  = 'fulfilled'
const REJECTED = 'rejected'

function MyPromise(fn){
    let self = this;
    self.state = PENDING;

    function resolve(data){
        if(self.state === PENDING){
            self.state = FULFILLED;
        }
    }

    function reject(data){
        if(self.state === PENDING){
            self.state = REJECTED
        }
    }

    try{
        fn(resolve,reject)
    }catch(e){
        reject(e)
    }
}
  1. then()
const PENDING = 'pending'
const FULFILLED  = 'fulfilled'
const REJECTED = 'rejected'

function MyPromise(fn){
    let self = this;
    self.state = PENDING;
    self.value  =  null;
    self.reason = null;

    function resolve(data){
        if(self.sta
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Promise是一种用于处理异步操作的JavaScript对象。它提供了一种更优雅和可读性更高的方式来处理异步代码,避免了回调地狱的问题。Promise有三个状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当Promise的状态发生改变时,会触发相应的回调函数。 以下是一个简单Promise实现原理的例子: ```javascript class MyPromise { constructor(executor) { this.status = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.status === 'pending') { this.status = 'fulfilled'; this.value = value; this.onResolvedCallbacks.forEach((callback) => callback()); } }; const reject = (reason) => { if (this.status === 'pending') { this.status = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach((callback) => callback()); } }; 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.status === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.status === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.status === 'pending') { this.onResolvedCallbacks.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; } resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } if (x instanceof MyPromise) { x.then(resolve, reject); } else { resolve(x); } } catch(onRejected) { return this.then(null, onRejected); } } ``` 这个例子展示了一个简单Promise实现,包括Promise的构造函数、状态的改变、回调函数的执行、链式调用以及错误处理等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值