手写Promise【05】-Promise 方法的异常捕获以及 then 方法实现可选参数

最新推荐文章于 2022-12-30 16:24:01 发布
最新推荐文章于 2022-12-30 16:24:01 发布
阅读量546 收藏
点赞数
文章标签： javascript 前端 Promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shengshengshiwo/article/details/123210419
版权

1. 捕获自定义 LyPromise 中的错误

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class LyPromise {
    constructor(executor) {
        try {
            executor(this.resolve, this.reject);
        } catch(error) {
            this.reject(error);
        }
    }

    status = PENDING;

    value = undefined;
    reason = undefined;

    // 成功回调
    successCallback = [];
    // 失败回调
    failCallback = [];

    resolve = (value) => {
        if (this.status !== PENDING) return;
        this.status = FULFILLED;
        this.value = value;
        // 判断成功回调是否存在，如果存在 就调用成功回调
        // this.successCallback && this.successCallback(this.value);
        while (this.successCallback.length) {
            this.successCallback.shift()(this.value); //执行
        }

    }

    reject = (reason) => {
        if (this.status !== PENDING) return;
        this.status = REJECTED;
        this.reason = reason;
        // 判断失败回调是否存在，如果存在 就调用失败回调
        // this.failCallback && this.failCallback(this.reason)
        while (this.failCallback.length) {
            this.failCallback.shift()(this.reason)
        }

    }

    then(successCallback, failCallback) {
        let Promise2 = new LyPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = successCallback(this.value);
                    resolvePromise(Promise2, x, resolve, reject);
                    } catch (error) {
                        //  Q: 为啥要用 reject
                        //  A: 链式调用 then 方法的时候，上一个发生了错误的 then 需要在下一个 then 方法中抛出
                        reject(error);
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = failCallback(this.reason);
                        resolvePromise(Promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0)
            } else {
                // 执行器是异步操作时，status还是pending，
                // 所以此时并不知道是成功还是失败回调，那么这里就需要把这两个回调
                // 存储起来
                this.successCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = successCallback(this.value);
                            resolvePromise(Promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
                this.failCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = failCallback(this.reason);
                            resolvePromise(Promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
            }
        })

        return Promise2;

    }
}


function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError("Promise 被循环引用了!!!"))
    }

    if (x instanceof LyPromise) { // promise对象
        x.then(resolve, reject)
    } else {  // 普通值
        resolve(x);
    }

}

module.exports = LyPromise;

2. then 方法的参数变为可选参数

在 Promise 中 then 方法中的成功回调和失败回调是可选参数，属于可写可不写的。

let promise = new Promise((resolve, reiect) => {
    resolve(100);
});

promise
    .then()
    .then()
    .then()
    .then((value) => {
    console.log(value);  //  100
});

当在前一个 then 方法中不传递任何参数的时候，实际上等同于传递了一个返回了自己的回调函数：
在这里插入图片描述

所以只要判断一下这个 then方法有没有传递参数应该就可以了，如果没有传递参数，那么就给他补一个参数。

  then(successCallback, failCallback) {
        successCallback = successCallback ? successCallback : value => value;
        failCallback = failCallback ? failCallback : reason => reason;
        let Promise2 = new LyPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = successCallback(this.value);
                        resolvePromise(Promise2, x, resolve, reject);
                    } catch (error) {
                        //  Q: 为啥要用 reject
                        //  A: 链式调用 then 方法的时候，上一个发生了错误的 then 需要在下一个 then 方法中抛出
                        reject(error);
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = failCallback(this.reason);
                        resolvePromise(Promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0)
            } else {
                // 执行器是异步操作时，status还是pending，
                // 所以此时并不知道是成功还是失败回调，那么这里就需要把这两个回调
                // 存储起来
                this.successCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = successCallback(this.value);
                            resolvePromise(Promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
                this.failCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = failCallback(this.reason);
                            resolvePromise(Promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
            }
        })

        return Promise2;

    }

测试一下：

在这里插入图片描述

在这里插入图片描述

3. 目前所有代码

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class LyPromise {
    constructor(executor) {
        try {
            executor(this.resolve, this.reject);
        } catch(error) {
            this.reject(error);
        }
    }

    status = PENDING;

    value = undefined;
    reason = undefined;

    // 成功回调
    successCallback = [];
    // 失败回调
    failCallback = [];

    resolve = (value) => {
        if (this.status !== PENDING) return;
        this.status = FULFILLED;
        this.value = value;
        // 判断成功回调是否存在，如果存在 就调用成功回调
        // this.successCallback && this.successCallback(this.value);
        while (this.successCallback.length) {
            this.successCallback.shift()(this.value); //执行
        }

    }

    reject = (reason) => {
        if (this.status !== PENDING) return;
        this.status = REJECTED;
        this.reason = reason;
        // 判断失败回调是否存在，如果存在 就调用失败回调
        // this.failCallback && this.failCallback(this.reason)
        while (this.failCallback.length) {
            this.failCallback.shift()(this.reason)
        }

    }

    then(successCallback, failCallback) {
        let Promise2 = new LyPromise((resolve, reject) => {
            if (this.status === FULFILLED) {
                setTimeout(() => {
                    try {
                        let x = successCallback(this.value);
                        resolvePromise(Promise2, x, resolve, reject);
                    } catch (error) {
                        //  Q: 为啥要用 reject
                        //  A: 链式调用 then 方法的时候，上一个发生了错误的 then 需要在下一个 then 方法中抛出
                        reject(error);
                    }
                }, 0)
            } else if (this.status === REJECTED) {
                setTimeout(() => {
                    try {
                        let x = failCallback(this.reason);
                        resolvePromise(Promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0)
            } else {
                // 执行器是异步操作时，status还是pending，
                // 所以此时并不知道是成功还是失败回调，那么这里就需要把这两个回调
                // 存储起来
                this.successCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = successCallback(this.value);
                            resolvePromise(Promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
                this.failCallback.push(() => {
                    setTimeout(() => {
                        try {
                            let x = failCallback(this.reason);
                            resolvePromise(Promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
            }
        })

        return Promise2;

    }
}


function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) {
        return reject(new TypeError("Promise 被循环引用了!!!"))
    }

    if (x instanceof LyPromise) { // promise对象
        x.then(resolve, reject)
    } else {  // 普通值
        resolve(x);
    }

}

module.exports = LyPromise;
极客小生
关注
Promise 捕获错误
sjhcake的博客
02-11 848
你好，我是南一。前言：今天做项目时，遇到Promise抛出错误捕获不到的情况，然后我就去找了，重新学了一遍，又加深了对Promise的理解，分享给大家，望斧正！
es6 promise then对异常处理的方法
稻草人的格子衫
03-06 9483
1. then()里有两个回调函数，第一个是成功后（resolve返回）的回调function(data) {}, 另一个是失败后（reject返回）的回调function(err) {}，异常发生时可以放在第二个回调里面处理。 2. 也可以在then后面加.catch，在这里面进行异常处理 建议用2 function test(flag) { return new Promise((r...
【Flutter】Future 异步编程 ( 简介 | then 方法 | 异常捕获 | async、await 关键字 | whenComplete 方法 | timeout 方法 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-25 6565
一、Future 简介、 二、Future.then 使用、 三、Future 异常捕获、 四、Dart 练习网站、 五、async、await 关键字、 六、whenComplete 方法、 七、timeout 方法、 八、相关资源、
10【Promise对象】
DSelegent的博客
08-27 856
10【Promise对象】
js代码-手写代码练习----promise的实现
07-15
4. **catch方法**：Promise.prototype.catch是用于捕获错误的，相当于then的第二个参数，专门处理错误。如果then中没有处理的错误，可以通过catch来捕获。 5. **resolve和reject的调用**：在执行器函数中，我们根据...
js代码-手写 Promise 的实现
07-16
手写Promise的基本结构通常包括构造函数和两个关键方法：resolve和reject。构造函数接收一个执行器函数，该函数接收这两个方法作为参数： ```javascript function MyPromise(executor) { // 初始化Promise状态 ...
js-Promise：手写系列手写promise，vue ..
02-21
`catch()` 方法是 `.then(null, rejectionHandler)` 的简写，用于捕获并处理错误。 ```javascript myPromise .then(function onFulfilled(value) { // 处理成功 }) .catch(function onRejected(error) { // ...
js代码-状态模式 手写promise
07-15
手写Promise可以帮助我们深入理解其工作原理，以下将详细介绍Promise的核心概念以及如何通过JavaScript实现状态模式来构建Promise。 1. Promise的基本结构： Promise构造函数接收一个执行器函数，该函数接收两个...
Promise的异常捕获
weixin_30526593的博客
11-04 874
Promise捕获异常这里有两种方式 第一种单独对 .then() 中指定异常处理函数（第一种一般用在，希望捕获异常然后不影响接下里Promise的执行） 我们只需要在 .then() 中添加两个function就好了，第二个是用来处理失败的情况。 第二种使用.catch来实现全部捕获（第二种一般用在，当一个Promise发生了异常，剩下的Promise都不在执行） 转...
Promise 中的异步错误 怎么捕获
liubangbo的专栏
12-30 1664
在obj.abc.status这里会出现引用错误，因为是同步错误，可以被catch捕获。我们在看下，在Promise中异步产生的错误能否被catch捕获？怎么让catch能捕获到呢？用对异步代码加try catch ，然后把错误reject出去，这样就可以捕获到异步代码里面的错误了。大家可以执行一下，catch并没有捕获到引用错误。原因就是错误是异步的，catch捕获不到。
关于Callback回调，传递参数
XQF
09-05 7791
关于Callback回调，传递参数标签（空格分隔）：CSDN
retrofit 对callback错误的统一处理
Mr_Four
03-15 3205
前言 在使用 retrofit 的时候，碰到这样一个问题，所有的网络接口都要进行网络请求错误判断而进行错误处理，也就是说每个 Callback 都要做同一件事情，这样就平白添加了许多无用的代码。以下是怎么对 retrofit 的 Callback 进行统一的错误处理 知识了解 retrofit 是对 okHttp 进行的封装，okHttp 请求返回的状态码为： HTTP St...
jQuery的延迟对象
xiaozhen0610的博客
08-14 180
之前看别人的demo，发现在延迟对象被resolve时要执行的代码，有时会写在deferred.then方法里执行，有时会写在deferred.done方法里执行。 这让对延迟对象一知半解的我非常困惑，今天抽时间研究了一下下，发现：在某种环境下，两个方法的确能实现同样的效果。 这种特定的环境是怎样呢？ 先看一下deferred.done的用法： // 创建deferred对象 var dtd = $.Deferred(); // 解决deferred对象 dtd.resolve('finish'..
ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合
热门推荐
https://github.com/xiaohuoni
04-11 1万+
继上节课，我已经介绍了使用$q和callback的方式，从service服务获取数据。 但是在真是的项目中，一般是用户使用控制器从服务向服务端发起数据请求，有获取的数据传递给模型，再由模型更新视图展示给用户这样一个MVC过程，详细的可以查看我的第二课。（USER------use------>CONTROLLERUSER------manipulates------>MODEL------upd
手写Promise【03】-实现then方法多次调用与链式调用
BLUEHEART
02-28 1610
1. then 方法的多次调用 我们在定义成功successCallback和失败failCallback的回调的时候，只定义了一个值，没有考虑到 then 方法被多次在异步中调用的情况，所以在这里应该将成功和失败的回调定义成为一个可收纳多个值的东西–数组。 successCallback = []; failCallback = []; 所以 then 方法中的回调存储也随之改变： this.successCallback.push(successCallback); this.failCallback
如何获取.then的返回值_如何优雅地处理Async/Await的异常？
weixin_39945789的博客
10-28 670
译者按： 使用.catch()来捕获所有的异常原文: Async Await Error Handling in JavaScript译者: Fundebug本文采用意译，版权归原作者所有async/await 中的异常处理很让人混乱。尽管有很多种方式来应对async 函数的异常，但是连经验丰富的开发者有时候也会搞错。假设你有一个叫做run()的异步函数。在本文中，我会描述 3 种方式来处理run...
Promise的异常捕获问题
Always-Learning
04-11 1765
Promise根据异常出现的位置不同采取的方案也不同 Promise内部抛出异常 通过then的第二个函数来捕捉异常。 // Promise的异常捕获问题 const promise = new Promise((resolve,reject) => { throw new Error('test') }) // 通过then的第二个函数来进行捕捉 promise.then(res => { console.log(res); },err => { conso
.then .catch都执行 错误原因
weixin_44713446的博客
12-03 3070
.then 函数里边有错误 检查下
手写Promise.try方法
最新发布
08-27
手写Promise.try方法的目的是在执行一个函数时处理可能的异常，并返回一个Promise对象。下面是一个手写Promise.try方法的示例代码： ```javascript Promise.try = function(fn) { return new Promise((resolve, reject) => { try { resolve(fn()); } catch (error) { reject(error); } }); }; ``` 上述代码中，我们定义了一个静态的Promise.try方法，它接收一个函数作为参数。在这个方法内部，我们使用try-catch语句来捕获函数执行过程中可能的异常。如果函数执行成功，我们使用resolve方法将结果传递给Promise对象；如果函数执行出错，我们使用reject方法将错误传递给Promise对象。 使用Promise.try方法时，可以像下面这样调用： ```javascript Promise.try(() => { // 在这里执行可能抛出异常的代码 return someValue; // 返回成功的结果 }).then(result => { // 处理成功的结果 }).catch(error => { // 处理异常情况 }); ``` 在上述示例中，我们将需要执行的代码放在Promise.try的回调函数中，并通过return语句返回成功的结果。接着可以使用.then方法处理成功的结果，或使用.catch方法处理异常情况。 这就是手写Promise.try方法的实现和用法。它可以帮助我们在执行函数时处理异常，并返回一个Promise对象，以便进行后续的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [手写Promise.all](https://blog.csdn.net/weixin_43376417/article/details/126561767)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [手写Promise.then方法](https://blog.csdn.net/weixin_43484007/article/details/125179681)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值