js中promise原理及手动基本实现

前言

上一章，我们实现了promise的then方法链式调用，本章节就对原型promise的catch方法进行简单的实现，同时对对象进行一个整体的异常处理优化，以提高对象整体的健壮度。

上一章链接：https://blog.csdn.net/weixin_42344533/article/details/117624450

过程

1、promise对象catch方法实现效果图。

2、实现catch原理：其实就是then方法的语法糖，参数，内部实现最终还是利用了then方法。

3、由于本人的疏忽，造成上一个版本存在一个bug，就是后一个then方法会错误地接收前一个then方法返回的err，造成回调混乱。

4、本版本对上一版本的bug进行了修复，对全局的handlePromise方法进行了修改，多传进来当前对象的status状态，通过判断该状态来决定执行resolve方法还是reject方法。

5、该版本还对promise对象内部进行了异常处理的优化，防止外部函数的错误而造成内部函数执行的失败，同时通过reject把异常抛出。

实现源码myPromise_v4.js：

const RESOLVE = 'resolved'
const REJECT = 'rejected'
const PENDING = 'pending'const handlePromise = (status, result, newPromise, resolve, reject) => {if (result === newPromise) {throw new Error('can not return oneself')}if ((typeof result === "object" && result != null) || typeof result === "function") {let lock = falsetry {const then = result.thenif (typeof then === "function") {then.call(result,r => {if (lock) returnhandlePromise(r, newPromise, resolve, reject)lock = true},e => {if (lock) returnreject(e)lock = true})} else {resolve(result)}} catch (error) {reject(error)}} else if (status === RESOLVE) {resolve(result)} else {reject(result)}
}function selfPromise(exe) {this.status = PENDINGthis.result = undefinedthis.reason = undefinedthis.resolveAsyList = []this.rejectAsyList = []this.init = (exe) => {const resolve = (result) => {if (this.status === PENDING) {this.result = resultthis.status = RESOLVEthis.resolveAsyList.map(resolveAsy => {resolveAsy()})}}const reject = (reason) => {if (this.status === PENDING) {this.reason = reasonthis.status = REJECTthis.rejectAsyList.map(rejectAsy => {rejectAsy()})}}try {exe(resolve, reject);} catch (error) {reject(error)}}this.init(exe)this.then = (onResolve, onReject) => {onResolve = typeof onResolve === "function" ? onResolve : (data) => dataonReject = typeof onReject === "function" ? onReject : (err) => errconst newPromise = new selfPromise((resolve, reject) => {if (this.status === RESOLVE) {setTimeout(() => {try {const result = onResolve(this.result)handlePromise(RESOLVE, result, newPromise, resolve, reject)} catch (error) {reject(error)}}, 0)}if (this.status === REJECT) {setTimeout(() => {try {const result = onReject(this.reason)handlePromise(REJECT, result, newPromise, resolve, reject)} catch (error) {reject(error)}}, 0)}if (this.status === PENDING) {this.resolveAsyList.push(() => {try {const result = onResolve(this.result)handlePromise(RESOLVE, result, newPromise, resolve, reject)} catch (error) {reject(error)}})this.rejectAsyList.push(() => {try {const result = onReject(this.reason)handlePromise(REJECT, result, newPromise, resolve, reject)} catch (error) {reject(error)}})}})return newPromise}this.catch = (onReject) => {return this.then(undefined, onReject)}
}module.exports = selfPromise

测试案例：

const myPromise = require('./myPromise_v4')var test = new myPromise((resolve, reject) => {setTimeout(()=>{reject("error")},1000)
})
test.then(res => {console.log("res1", res)return "then1"
}, err => {console.log("err1",err)return err
}).then(res => {console.log("res2", res)
}, err => {console.log("err2", err)return err
}).catch(err=>{console.log("catch",err)
})
console.log("同步代码")

至此，我们已经基本把promise对象的基本方法都实现了，除此之外，原生的promise对象还有all，race这两个方法，这个大家可以自行实现，本系列文章到此就告一段落了，如果过程中有错误的希望大家指出，感谢大家的支持，觉得本系统文章有用的老铁可以给作者点个赞，谢谢。

js中promise原理及手动基本实现_V4相关推荐

js中promise原理及手动基本实现_V1
前言这几天面试过程,有个面试官突然跟我抠上了promise的实现原理,虽然有所准备,但是没能清晰地说出其中的原理,所以有点遗憾!!!,但是事已至此,只能默默去查了相关资料深入其中了解一番.因此就有了 ...
js中promise原理及手动基本实现_V2
前言上一章中已经讲完了promise最基本实现的原理,本章将在其基础上进行进一步的扩展,以满足更多的使用场景,源码在文章最后哦. 上一章链接:https://blog.csdn.net/weixin ...
js中promise原理及手动基本实现_V3
前言前一章讲到通过订阅-发布模式,解决了resolve被setTimeout包裹,导致最终结果出不来的bug.但是,原生的promise还有一个很重要的特性,就是可以进行链式调用,then方法的执行 ...
JS中Promise函数then的奥秘探究
JS中Promise函数then的奥秘探究 Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个 ...
js中 new原理及实现
在js中,我们通过new运算符来创建一个对象,它是一个高频的操作.我们一般只是去用它,而很少关注它是如何实现的,它的工作机制是什么. 1 简介本文介绍new的功能,用法,补充介绍不加new也同样也创 ...
Js中Promise用法
promise是用来解决Js中的异步问题的.基本结构如下: function a() {return new Promise((resolve, reject) => {//dosomethin ...
js中promise的用法
promise promise是ES6引进的异步编程解决方案,是一个构造函数,可以实例化对象,可以解决回调地狱的问题. 首先我们看一下promise的实例化对象是什么 let P = new Prom ...
js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
php模拟红绿灯,JS 中使用Promise 实现红绿灯详解
本文通过实例代码给大家介绍了JS 中使用Promise 实现红绿灯效果,在文中给大家介绍了一个promise用法例子,需要的朋友可以参考下,希望能帮助到大家. 要求使用promise 实现红绿灯颜色的 ...

js中promise原理及手动基本实现_V4

前言

过程

js中promise原理及手动基本实现_V4相关推荐

最新文章

热门文章