手写promise异步状态修改then方法返回来的结果
看看下面这一段代码返回来的是什么？？？
<body>
<script type="text/javascript">
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 1000)
})
const res=p.then(res => {
console.log(res)
}, err => {
console.log(err)
})
// 根据promise返回来的结果规律，
// 由于我什么都没有写，返回的应该是undefined
// 它返回的的是非Promise类型的数据,如undefined; 数字，字符串。
// 那么 result就是一个成功的Promise
console.log( 'res', res )
</script>
</body>
我们现在写的promise
<script src="./Promise.js"></script>
<body>
<script type="text/javascript">
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 1000)
})
const res=p.then(res => {
console.log(res)
}, err => {
console.log(err)
})
console.log( 'res', res )
</script>
</body>
结果
{
PromiseStatus:"pending"
PromiseValue:null
}
为啥是padding
当我们的代码从上往下执行的时候，
会走进
if (this.PromiseStatus === "pending") {
// 这个是保存回调函数
this.callBack.push({
onResolve: onResolve,
onReject: onReject,
});
}
这里；
我们知道这里并没有去调用 resolve, reject
所以返回来的状态一定是一个padding
如何处理这个问题
const self=this; // new add
if (this.PromiseStatus === "pending") {
// 这个是保存回调函数 new add
this.callBack.push({
// 执行成功的回调函数，改变里面的状态
// 下面这些都是根据promise返回结果的结论来写的
onResolve: function () {
let result = onResolve(self.PromiseStatus)
// 判断是否是promise，根据是否是promise返回不同的状态
if (result instanceof Promise) {
// 如果是一个promise就可以去调用then方法
result.then(s => {
resolve(s)
}, e => {
reject(e)
})
} else {
// 如果不是promise直接返回成功
resolve(result)
}
},
onReject: function () {
let result = onReject(self.PromiseStatus)
// 判断是否是promise，根据是否是promise返回不同的状态
if (result instanceof Promise) {
// 如果是一个promise就可以去调用then方法
result.then(s => {
resolve(s)
}, e => {
reject(e)
})
} else {
// 如果不是promise直接返回成功
resolve(result)
}
}
});
}
现在虽然可以返回正常的结果和状态,但是抛出异常是有问题的哈,使用try catch
完整版本
function Promise(executor) {
const self = this;
function resolve(data) {
// 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
if (self.PromiseStatus !== "pending") return;
self.PromiseStatus = "resolved";
self.PromiseValue = data;
// 调用成功的回调函数进行遍历
self.callBack.forEach((item) => {
item.onResolve(data);
});
}
// 同样声明成为一个函数;修改状态
function reject(err) {
// 如果状态发生改变就直接返回(为了让Promise的状态只发生一次改变)；
if (self.PromiseStatus !== "pending") return;
self.PromiseStatus = "rejected";
self.PromiseValue = err;
// 调用失败的回调函数数进行遍历
self.callBack.forEach((item) => {
item.onReject(err);
});
}
this.PromiseStatus = "pending";
this.PromiseValue = null;
// 声明属性 new add
this.callBack = [];
// 对异常进行处理；使用try catch
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
// 自定义封装then方法执行回调
Promise.prototype.then = function (onResolve, onReject) {
// new add注意this的指向
const self = this;
// 返回一个promise对象
return new Promise((resolve,reject)=>{
if (this.PromiseStatus === "resolved") {
try{
let chenggong= onResolve(this.PromiseValue);
if(chenggong instanceof Promise){
// 如果你是一个Promise,那么可以去调用这个then方法
chenggong.then(v=>{
resolve(v);
},r=>{
reject(r);
})
}else{
// 不是Promise类型的对象
// 结果的对象状态【成功】
resolve(chenggong)
}
}catch(e){
reject(e);
}
// 获取回调函数的执行结果
}
if (this.PromiseStatus === "rejected") {
onReject(this.PromiseValue);
}
// 如果是pending的状态
if (this.PromiseStatus === "pending") {
// 这个是保存回调函数 new add
this.callBack.push({
// 执行成功的回调函数，改变里面的状态
// 下面这些都是根据promise返回结果的结论来写的
onResolve: function () {
//对抛出的异常进行处理哈
try {
let result = onResolve(self.PromiseStatus)
// 判断是否是promise，根据是否是promise返回不同的状态
if (result instanceof Promise) {
// 如果是一个promise就可以去调用then方法
result.then(s => {
resolve(s)
}, e => {
reject(e)
})
} else {
// 如果不是promise直接返回成功
resolve(result)
}
} catch (error) {
reject(error)
}
},
onReject: function () {
//对抛出的异常进行处理哈
try {
let result = onReject(self.PromiseStatus)
// 判断是否是promise，根据是否是promise返回不同的状态
if (result instanceof Promise) {
// 如果是一个promise就可以去调用then方法
result.then(s => {
resolve(s)
}, e => {
reject(e)
})
} else {
// 如果不是promise直接返回成功
resolve(result)
}
} catch (error) {
reject(error)
}
}
});
}
})
};
手写promise异步状态修改then方法返回来的结果的更多相关文章
- 手写Promise看着一篇就足够了
目录 概要 博客思路 API的特性与手写源码 构造函数 then catch Promise.resolved Promise.rejected Promise.all Promise.race 概要 ...
- 手写Promise A+ 规范
基于ES6语法手写promise A+ 规范,源码实现 class Promise { constructor(excutorCallBack) { this.status = 'pending'; ...
- 手写Promise中then方法返回的结果或者规律
1. Promise中then()方法返回来的结果或者规律 我们知道 promise 的 then 方法返回来的结果值[result]是由: 它指定的回调函数的结果决定的 2.比如说下面这一段代码 l ...
- 手写promise
写在前面: 在目前的前端分开中,我们对于异步方法的使用越来越频繁,那么如果处理异步方法的返回结果,如果优雅的进行异步处理对于一个合格的前端开发者而言就显得尤为重要,其中在面试中被问道最多的就是对Pro ...
- [转]史上最最最详细的手写Promise教程
我们工作中免不了运用promise用来解决异步回调问题.平时用的很多库或者插件都运用了promise 例如axios.fetch等等.但是你知道promise是咋写出来的呢? 别怕-这里有本promi ...
- 手写Promise简易版
话不多说,直接上代码 通过ES5的模块化封装,向外暴露一个属性 (function(window){ const PENDING = 'pending'; const RESOLVED = 'fulf ...
- 前端面试题之手写promise
前端面试题之Promise问题 前言 在我们日常开发中会遇到很多异步的情况,比如涉及到 网络请求(ajax,axios等),定时器这些,对于这些异步操作我们如果需要拿到他们操作后的结果,就需要使用到回 ...
- 手写 Promise 符合 Promise/A+规范
异步编程是前端开发者必需的技能,过去管理异步的主要机制都是通过函数回调,然而会出现像“回调地狱”这样的问题.为了更好的管理回调,ES6 增加了一个新的特性 Promise.Promise 是 ES7 ...
- (手写识别) Zinnia库及其实现方法研究
Zinnia库及其实现方法研究 (转) zinnia是一个开源的手写识别库.采用C++实现.具有手写识别,学习以及文字模型数据制作转换等功能. 项目地址 [http://zinnia.sourcefo ...
- 手写 Promise
在上一章节中我们了解了 Promise 的一些易错点,在这一章节中,我们会通过手写一个符合 Promise/A+ 规范的 Promise 来深入理解它,并且手写 Promise 也是一道大厂常考题,在 ...
随机推荐
- SpringBoot Jar 包太大 瘦身 【终极版】
思路,将依赖的第三方jar包,移到启动jar包个面外部加载 jar 包 SpringBoot Jar 包太大 瘦身 [初试]简单应用 SpringBoot Jar 包太大 瘦身 [终极版],建议使用这 ...
- xTestRunner
高颜值测试报告-xTestRunner pip install XTestRunner # test_unit.py import unittest from XTestRunner import H ...
- 如何利用CCXT交易数字货币合约
更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 对于币圈量化老司机来说,相信或多或少都有接触过ccxt这个接口,ccxt为我们提供了多交易所统一的标准格 ...
- SQL Server 时间算差值/常用函数
项目中需要计算使用年限,按月份算.刚开始踩了坑,不足1年应该按1年算.记录下~ 和当前时间比较,用DATEDIFF函数DateDiff(month,比较的时间,getdate())先算出月份,再除以1 ...
- Go--统计数组中重复的元素及重复次数
代码: package main import ( "fmt" ) func main() { //创建有重复数值的数组 a1 := []int{1, 2, 3, 1, 4, 5, ...
- OOALV 分割屏幕
1功能说明 需要开发一个报表,分为上下两个部分,下边需要再分割为左右两个部分,点击上边部分的行,下边两个报表信息发生变化. 效果如下: 2代码实现 1.数据查询 分别查询MARA.MARC.MAKT三 ...
- 面试官：请聊一聊String、StringBuilder、StringBuffer三者的区别
面试官:"小伙子,在日常的写代码过程中,使用过String,StringBuilder和StringBuffer没?" 我:"用过的呀!" 面试官:" ...
- Problem B - Card Constructions （构造）
题意: 你可以用图示的方法建造金字塔,但是每一次都要建最大的金字塔,问最后能建几个金字塔. 思路: 我们可以发现对于每一个金字塔都是两边增加了两天边,然后中间行数− 1 -1−1个三角形,所以就可以求 ...
- win32com操作word 第十五 Find接口的使用
最近一直在忙于项目,以至于win32com的视频一直拖更.要不,书面形式更新吧.这次介绍的是Find接口. 假如,要在一篇2万字的文章中找到某些关键词,并返回Range对象,通常可以通过遍历段落 + ...
- C#开源跨平台的多功能Steam工具箱&GitHub加速神器
前言 作为一个程序员你是否会经常会遇到GitHub无法访问(如下无法访问图片),或者是访问和下载源码时十分缓慢就像乌龟爬行一般.今天分享一款C#开源的.跨平台的多功能Steam工具箱和GitHub加速 ...