Promise原理分析-50行实现简Promise

Promise 介绍

promise 主要用于链式的表示一个异步操作的结果及其返回值

Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。

它允许你为异步操作的成功和失败分别绑定相应的处理方法

状态:

  • pending: 初始状态,既不是成功,也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

方法:

Promise.all() :传入promise数组,全部resolve,则resolve

Promise.any() :传入promise数组,其中一个resolve,则resolve

Promise.race() :传入promise数组,其中一个resolve/reject,则resolve/reject

Promise.reject() :返回一个状态为失败的Promise对象

Promise.resolve() :返回一个状态为失败的Promise对象

原型方法:

then:接受结果

catch:捕获异常/rejection

finally:当前promise运行完毕后被调用

实现简易Promise:

class Pro {
            state = 0;

            constructor(fun) {
                fun((res) => {
                    this.handle(res, 1)
                }, (res) => {
                    this.handle(res, 2)
                })

            }

            handle(res, state) {
                this.state = state
                this.value = res
                setTimeout(() => {
                    const cb = state === 1 ? this.onFulfilled : this.onRejected
                    if (!cb) return;
                    const result = cb(res)
                    if (result instanceof Pro) {
                        this.next.handle(this.value, result.state)
                        return;
                    }
                    this.next.handle(this.value, state)
                }, 0)
            }

            then = (onSuc, onFail) => {
                this.next = new this.constructor(() => {
                })
                this.onFulfilled = onSuc
                this.onRejected = onFail
                return this.next
            }
        }

        Pro.resolve = (res) => {
            return new Pro((resolve) => {
                resolve(res)
            })
        }

  代码主要实现了,then方法,以及 resolve 方法

  仅供学习使用。。!

Promise、async和await是JavaScript中用于处理异步操作的关键字。它们的实现原理如下: 1. PromisePromise是一种表示异步操作的对象,它包含三种状态(pending、fulfilled、rejected)。当一个异步操作完成时,Promise可从pending状态转变为fulfilled状态,表示操作成功;或者从pending状态转变为rejected状态,表示操作失败。Promise提供了then方法来处理操作的结果,并可以进链式调用。 2. async/await:async函数是Generator函数的一种语法糖,用来化异步操作的处理。通过在函数前添加async关键字,函数返回值将被自动封装成Promise对象。await关键字只能在async函数中使用,用于暂停async函数的执,等待Promise对象的状态改变后再继续执。当await后面的异步操作完成时,它会返回Promise对象的结果。 下面以一个获取用户信息的案例来分析Promise、async和await的用法: 使用Promise实现: ``` function getUserInfo() { return new Promise((resolve, reject) => { setTimeout(() => { const user = { name: 'John', age: 25 }; resolve(user); }, 1000); }); } getUserInfo() .then(user => { console.log(user); }) .catch(error => { console.error(error); }); ``` 使用async/await实现: ``` function getUserInfo() { return new Promise((resolve, reject) => { setTimeout(() => { const user = { name: 'John', age: 25 }; resolve(user); }, 1000); }); } async function displayUserInfo() { try { const user = await getUserInfo(); console.log(user); } catch (error) { console.error(error); } } displayUserInfo(); ``` 以上两种方式都可以获取用户信息,并在操作完成后打印到控制台。使用async/await可以使代码看起来更加洁和易读。通过在async函数内部使用await关键字,可以将异步操作的代码写成类似同步代码的形式,提高了代码的可读性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值