Promise 专题一 promise的三种状态以及resolve,reject,then的实现

Promise

Promise 是面试的高频考点,了解原理,无论怎么问都难不到你,今天我们来聊一聊它

我们先来了解一下什么是Promise

一、Promise是异步编程的一种解决方案
二、Promise拥有的三种状态

 <script>
        // promise 系统预定好的
        // 三种状态 
        /*      成功:fulfilled (resolved) 
         *      失败:rejected 
         *      等待:pending 
         */

        // pending
        let res = new Promise((resolve,reject)=>{
     
        })
        console.log(res)
        
        // fulfilled
        let res1 = new Promise((resolve,reject)=>{
   
            resolve('resolve')
        })
        console.log(res1)
        
        // rejected
        let res2 = new Promise((resolve,reject)=>{
   
            reject('rejected')
        })
        console.log(res2)
        
</script>

在这里插入图片描述

三、Promise的状态不收外界影响,状态只能从pending ===> fulfilled 或者 pending ===> rejected 一旦变化状态不可逆
四、Promise的then
then 接收 2个参数 onResolved onRejected
then((res)=>{},(err)=>{})
then 3种返还值 =>返回的是promise 可以继续用then => 链式操作
五、Promise方法
Promise.resolve() 返还一个fulfilled状态的promise
Promise.reject() 返还一个rejected状态的promise
Promise.all() 一次性执行promise 结果放在数组中[],要求所有结果都是成功的后才会返回结果
Promise.race() 返还最快的promise结果
Promise.catch()
Promise.finally() 无论promise最后的状态如何都会执行

了解完Promise,我们自己实现一个简版的Promise

做一步测一步能保证我们的程序准确稳定的运行
第一步、实现promise的三种状态
MyPromise.js 实现自己的MyPromise类

class MyPromise {
   
    constructor(handle){
   
        this.status = 'pending';
        this.value = undefined ;
        // 只能通过bind 绑定this 不能用 call apply
        // 原因:这个函数的执行位置不在这,在自己的js逻辑执行
        // 使用call apply会将函数执行
        handle(this._resolve.bind(this),this._reject.bind(this))
    }

    _resolve
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮您实现一个简单的 Promise。 首先,Promise 有三种状态:pending(等待中)、fulfilled(已成功)和 rejected(已失败)。 我们可以通过一个变量来表示当前的状态,例如: ```javascript const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'rejected'; let status = PENDING; ``` 接下来,我们需要实现一个 Promise 构造函数,它接受一个函数作为参数,这个函数又接受两个参数,一个是 resolve 函数,一个是 reject 函数。这个函数在被调用时会执行一些异步操作,并在异步操作完成后调用 resolvereject 函数来改变 Promise状态。 ```javascript function MyPromise(executor) { let status = PENDING; function resolve(value) { status = FULFILLED; // TODO: 处理 value } function reject(reason) { status = REJECTED; // TODO: 处理 reason } // 执行异步操作 executor(resolve, reject); } ``` 现在我们已经可以创建一个 Promise 了,但是它并没有什么用处。我们需要实现一个 then 方法,它接受两个参数,一个是成功时的回调函数,一个是失败时的回调函数。当 Promise状态为 fulfilled 时,调用成功回调函数,否则调用失败回调函数。如果 then 方法被重复调用,我们需要将回调函数保存起来,等到异步操作完成后再执行。 ```javascript function MyPromise(executor) { let status = PENDING; let onFulfilledCallbacks = []; let onRejectedCallbacks = []; function resolve(value) { status = FULFILLED; onFulfilledCallbacks.forEach(callback => callback(value)); } function reject(reason) { status = REJECTED; onRejectedCallbacks.forEach(callback => callback(reason)); } function then(onFulfilled, onRejected) { if (status === FULFILLED) { onFulfilled(value); } else if (status === REJECTED) { onRejected(reason); } else { onFulfilledCallbacks.push(onFulfilled); onRejectedCallbacks.push(onRejected); } } // 执行异步操作 executor(resolve, reject); return { then, }; } ``` 最后,我们需要实现 resolvereject 方法,它们分别将 Promise状态改为 fulfilled 和 rejected,并将结果传递给 then 方法注册的回调函数。 ```javascript function MyPromise(executor) { let status = PENDING; let value; let reason; let onFulfilledCallbacks = []; let onRejectedCallbacks = []; function resolve(value) { status = FULFILLED; onFulfilledCallbacks.forEach(callback => callback(value)); } function reject(reason) { status = REJECTED; onRejectedCallbacks.forEach(callback => callback(reason)); } function then(onFulfilled, onRejected) { if (status === FULFILLED) { onFulfilled(value); } else if (status === REJECTED) { onRejected(reason); } else { onFulfilledCallbacks.push(onFulfilled); onRejectedCallbacks.push(onRejected); } } function MyPromise(resolve) { status = FULFILLED; value = resolve; onFulfilledCallbacks.forEach(callback => callback(value)); } function MyPromise(reject) { status = REJECTED; reason = reject; onRejectedCallbacks.forEach(callback => callback(reason)); } // 执行异步操作 executor(resolve, reject); return { then, resolve: MyPromise, reject: MyPromise, }; } ``` 现在我们已经实现了一个简单的 Promise,您可以使用它来处理异步操作了。需要注意的是,这个 Promise 只是一个简化版的实现,没有考虑到一些重要的细节,例如异步操作的异常情况、then 方法返回的是一个新的 Promise 等等。如果您需要在生产环境中使用 Promise,请使用原生的 Promise 或第三方库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值