基于PromiseA+规范实现一个promise
// 定义promise三种状态
let PENDING = 'PENDING'
let RESOLVED = 'RESOLVED' // 成功状态
let REJECTED = 'REJECTED' // 失败状态
console.log('own') const resolvePromise = (promise2, x, resolve, reject) => {
// A+规范中 x和promise2引用同一个对象抛出类型错误
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
// 后续的条件要严格判断 保证代码能和别的库一起使用
// x可能是一个函数或者对象
if ((typeof x === 'object' && x !== null) || typeof x === 'function') {
try {
let then = x.then;
if (typeof then === 'function') {
// 只能判断then是函数就认为其是promise
then.call(x, y => {
resolve(y)
}, e => {
reject(e)
})
} else {
resolve(x)
}
} catch (e) {
//TODO handle the exception
} } else {
resolve(x)
}
} class Promise {
constructor(excutor) {
this.status = PENDING
// 成功和失败的原因需要保存
this.value = undefined; // 成功的值
this.reason = undefined; // 失败的值
this.onResolvedCallbacks = []; // 存储成功的回调函数数组
this.onRejectedCallbacks = []; // 存储失败的回调函数数组
// 只有等待态的时候才能更改状态 let resolve = (value) => { if(value instanceof Promise){
value.then(resolve,reject) // 判断是promise.resolve 中如果传promise 递归解析 ,有延迟效果
} if (this.status = PENDING) {
this.value = value;
this.status = RESOLVED;
this.onResolvedCallbacks.forEach(fn => fn())
} }
let reject = (reason) => {
if (this.status = PENDING) {
this.reason = reason;
this.status = REJECTED;
this.onRejectedCallbacks.forEach(fn => fn())
}
}
// 当函数发生异常直接抛出错误
try {
excutor(resolve, reject)
} catch (e) {
reject(e)
}
}
// 关于then方法:
// 1: promise 成功或者失败会传递到外层的下一个then方法
// 2: 返回的是普通值(除了promise之外的值)都会触底到下一then的成功中;出错的情况走到下一次的失败中;
// 3: 错误处理 。自己最近的then没有错误处理,会向下传递错误直到有错误处理
// 4: 每次执行完then 返回都是新的promise (一旦成功或者失败就不能够修改状态)
then (onFulfilled, onRejected) { // 如果then中返回一个promise 我需要用x来决定是决定promise返回成功还是失败 let promise2 = new Promise((resolve, reject) => { // 链式调用
if (this.status === RESOLVED) {
setTimeout(() => { // 为了让resolvePromise拿到promise2
try {
// 如果状态是成功了,需要调用传入的第一个onFulfilled函数
let x = onFulfilled(this.value) //成功的回调直接执行;执行完成后拿到结果;ps: 成功之后返回的直接执行拿到结果存放到x中
// 但是返回的promise 还能继续then,继续传递成功的结果
// x可能是promise,解析promise ,使用这个返回的结果决定下一个then是成功还是失败
resolvePromise(promise2, x, resolve, reject) // 调用了下一个promise的resolve
} catch (error) {
reject(error)
} }, 0)
}
if (this.status === REJECTED) {
setTimeout(() => { // 为了让resolvePromise拿到promise2
try {
// 如果状态失败了,就需要使用第二个函数讲失败的原因返回
let x = onRejected(this.reason)
// 处理失败
resolvePromise(promise2, x, resolve, reject) //普通值都会传递到下一个的成功
} catch (error) {
reject(error)
} }, 0)
}
// 调用then的时候可能是pending状态
if (this.status === PENDING) {
this.onResolvedCallbacks.push(() => {
// todo
setTimeout(() => {
try {
let x = onFulfilled(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error)
}
}, 0) })
this.onRejectedCallbacks.push(() => {
// todo
setTimeout(() => {
try {
let x = onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject);
} catch (error) {
reject(error)
}
}, 0)
})
}
})
return promise2;
}
catch(errCallBack){
return this.then(null,errCallBack)
}
static resolve(data){
// 快速创建一个成功的promise
return new Promise((resolve,reject) => {
resolve(data)
})
}
static reject(reason){
// 快速创建一个失败的promise
return new Promise((resolve,reject) => {
reject(reason)
})
}
}
基于PromiseA+规范实现一个promise的更多相关文章
- Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...
- 掘金转载-手写一个Promise
目录 一 什么是Promise ? 二 Promises/A+ 规范 2.1 术语 2.2 基本要求 2.2.1. Promise的状态 2.2.2. Then 方法 2.3 简易版实践 2.4 进一 ...
- Promise A 规范的一个简单的浏览器端实现
简单的实现了一个promise 的规范,留着接下来模块使用.感觉还有很多能优化的地方,有时间看看源码,或者其他大神的代码 主要是Then 函数.回调有点绕人. !(function(win) { fu ...
- 一步一步实现一个Promise A+规范的 Promise
2015年6月,ES2015(即ES6)正式发布后受到了非常多的关注.其中很重要的一点是 Promise 被列为了正式规范. 在此之前很多库都对异步编程/回调地狱实现了类 Promise 的应对方案, ...
- 根据 Promise/A+ 和 ES6 规范,实现 Promise(附详细测试)
Promise 源码 https://github.com/lfp1024/promise promise-a-plus const PENDING = 'PENDING' const REJECTE ...
- 教你一步一步实现一个Promise
Promise我想现在大家都非常熟悉了,主要作用就是解决异步回调问题,这里简单介绍下. Promise规范是CommonJS规范之一,而Promise规范又分了好多种,比如 Promises/A.Pr ...
- 【原】手写一个promise
上一篇文章中,我们介绍了Promise的基本使用,在这篇文章中,我们试着自己来写一个Promise,主要是学习Promise的内部机制,学习它的编程思想. !!!备注:本文写的不好,仅供自己学习之用, ...
- Promise原理—一步一步实现一个Promise
promise特点 一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pending到rejected ...
- 前端笔记之ES678&Webpack&Babel(下)AMD|CMD规范&模块&webpack&Promise对象&Generator函数
一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...
随机推荐
- 从ELF文件谈起
本文信息来源: 又是一期硬核内容:ELF文件格式 What's the difference of section and segment in ELF file format ELF Section ...
- .NET6: 开发基于WPF的摩登三维工业软件 (8) - MVVM
基于WPF开发界面的一个很大优势是可以方便地基于MVVM设计模式开发应用.本文从应用的角度基于MVVM实现参数化管材的创建界面. 1 MVVM MVVM是Model-View-ViewModel的简写 ...
- 微信小程序yansongda 支付宝测试
小程序支付接入文档 1:php 框架composer 安装yansongda插件 composer require yansongda/pay:^2.10 -vvv 2:支付宝沙箱支付获取自己Appi ...
- think php 验证码
1.下载 composer require topthink/think-captcha 1.* // composer 下载 //过程 D:\PHP\phpstudy_pro\WWW\1906A\p ...
- Java入土---Java基础(一)
注释,标识符,关键字 注释类似于我们的随手记,并且不会被执行,是写给我们自己看的,书写注释是一个非常好的习惯 重点来了,Java中注释有三种:单行注释,多行注释,文档注释 单行注释 "//& ...
- largebin attack
largebin attack 由这个名字就可以看出是对 largebin 进行的操作,需要的条件是存在 UAF 或者可以构造出 UAF.实现的功能是: 1.任意地址写入一个大数字 2.实现任意地址分 ...
- 《Mybatis 手撸专栏》第1章:开篇介绍,我要带你撸 Mybatis 啦!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 1. 为甚,撸Mybatis 我就知道,你会忍不住对它下手! 21年带着粉丝伙伴撸了一遍 Sp ...
- CodeGym-17~20
读文章 0.如果是基本数据类型的话,在数组中就存储特定的值:如果是对象的话,在数组中就是存储对象的引用. 1.数组本身就是对象 再读文章 0.Arrays.sort(array); Arrays.to ...
- 除了增删改查你对MySQL还了解多少?
目录 除了增删改查你对MySQL还了解多少? MySQL授权远程连接 创建用户.授权 客户端与服务器连接的过程 TCP/IP 命名管道和共享内存 Unix域套接字文件 查询优化 MySQL中走与不走索 ...
- request和response——请求响应对象
请求对象--request 获取get请求的值 一次请求,返回一个响应. 地址栏:http://127.0.0.1:8000/day3/get_request?lan=python 问号:代表请求参数 ...