手写Promise方法

简介: 手写Promise方法

在工作中我们向后端请求数据,经常使用promise去做,因为promise是异步操作,发送请求时不会阻止异步外的代码运行,且易于对请求状态改变做出对应的操作,我们来实现一下

首先创建一个构造函数,构造函数中接受一个形参,形参是一个回调函数,用于我们创建promise实例时传递过去,我们后面在讲这个用途

我们在构造函数中定义一个状态变量,三个状态的值分别有pending(发送中)resolved(请求成功)rejected(请求失败),状态变量初始状态值默认为pending,在分别定义一个存储成功返回值的变量和存储失败返回值的变量

function myPromise(constructor) {
//状态
    this.status = "pending"
   //接受成功返回值变量
    this.value = undefined;
     //接受失败返回值变量
    this.reason = undefined;
}

在构造函数中在定义两个函数,分别是resolve(成功执行函数)和reject(失败执行函数),我们这里采用箭头函数,使其可以共用作用域变量,无需在改变其this指向,这两个函数中所做的操作都是一样的,都是判断当前的状态是否是pending,如果是pending则进行下一步操作,改变当前初始状态的值和把当前结果传递给对应的接受返回值变量,这样我们就可以实现在使用中通过判断在选择性执行成功或者失败的回调函数并把值传递出去

//成功的回调函数
const resolve=(value)=>{  
        if (this.status === "pending") {
            this.value = value;
            this.status = "resolved";
        }
    }
    //失败的回调函数
const reject= (error)=>{
        if (this.status === "pending") {
            this.reason = error;
            this.status = "rejected";
        }
    }

这里我们在加一层try...catch用于捕获构造函数出现异常,我们这个时候就用到了形参回调函数,在其执行时,我们需要将成功的回调函数和失败的回调函数传递进去,同时放到try中防止执行报错,如果执行报错则直接进行执行失败回调函数

try {
        constructor(resolve, reject);
    } catch (e) {
        reject(e);
    }

我们在构造函数原型上写一个then方法,接受两个参数,第一个参数是成功的执行回调函数,第二个参数是失败的执行回调函数,我们通过判断构造函数中的状态值进行选择性执行then方法中的成功回调函数或失败回调

myPromise.prototype.then = function(onFullfilled, onRejected) {
    switch (this.status) {
        case "resolved":
            onFullfilled(this.value);
            break;
        case "rejected":
            onRejected(this.reason);
            break;
    }

我们使用一下

//创建myPromise实例
const pro = new myPromise(function(resolve, reject) {
//抛出成功函数
    resolve(1)
    //抛出失败函数
  //  reject(2)
});
//我们通过实例使用myPromise上的then方法,第一个参数为成功函数,第二个参数为失败函数,并将其所传递的值打印出来
pro.then(function(res) {
    console.log(res)
},function(err) {
    console.log(err)
})

坚持努力,无惧未来!

相关文章
|
6月前
|
前端开发
【面试题】吃透Promise?先实现一个再说(包含所有方法)(二)
【面试题】吃透Promise?先实现一个再说(包含所有方法)(二)
|
6月前
|
存储 运维 前端开发
【面试题】吃透Promise?先实现一个再说(包含所有方法)(一)
【面试题】吃透Promise?先实现一个再说(包含所有方法)(一)
|
前端开发
62 # 借用 promise 写成类的方法
62 # 借用 promise 写成类的方法
32 0
|
前端开发
21 # 实现 promise 的 race 方法
21 # 实现 promise 的 race 方法
47 0
|
前端开发
20 # 实现 promise 的 all 方法
20 # 实现 promise 的 all 方法
50 0
|
前端开发
18 # promise 的 finally 方法实现原理
18 # promise 的 finally 方法实现原理
62 0
|
前端开发
7 # promise 的 then 方法
7 # promise 的 then 方法
83 0
|
3天前
|
前端开发 索引
Promise.all() 方法的参数可以是什么类型?
综上所述,`Promise.all()` 方法的参数类型较为灵活,但无论使用哪种类型的可迭代对象作为参数,其核心的异步操作处理逻辑和成功失败的判断机制都是一致的,都是为了方便地处理多个异步操作的并发执行和结果汇总。
|
6天前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
3天前
|
前端开发
Promise.race() 方法在什么场景下使用?
`Promise.race()` 方法通过其独特的竞争机制,在需要快速获取结果、设置超时控制、实现快速失败以及根据条件动态选择异步操作等场景中,能够提供简洁有效的解决方案,帮助优化异步操作的执行流程和提高系统的响应性能。

热门文章

最新文章