Promise 简化版实现 resolve reject throw回调
// 原生promise
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('OK')
},1000)
})
// 自定义Promise 简化版实现 resolve reject throw回调
function Promise(executor){
//添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
//保存实例对象的this值 避免指向window
const self = this
// 声明属性保持回调函数
this.callbacks = []
function resolve(data){
// 修改promise状态(promiseState)
self.PromiseState = 'fulfilled'// fulfilled
//设置结果值(promiseResult)
self.PromiseResult = data
}
function reject(data){
self.PromiseState = 'rejected'
//设置结果值(promiseResult)
self.PromiseResult = data
}
try{
//执行器函数内部同步调用
executor(resolve,reject)
}catch(e){
//抛出异常时 修改promise对象状态
reject(e)
}
}
// 封装resolve方法
Promise.resolve = function(value){
//返回Promise对象
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
// 状态设置为成功
resolve(value)
}
})
}
//封装Reject方法
Promise.reject = function(reason){
return new Promise((resolve,reject)=>{
reject(reason)
})
}
promise完整版实现
// 对promise重复代码的封装
// 原生promise
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('OK')
},1000)
})
p.then(value=>{
console.log(value)
},reason=>{
console.log(reason)
})
p.catch(reason=>{
console.warn(reason)
})
// 自定义Promise
function Promise(executor){
//添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
//保存实例对象的this值 避免指向window
const self = this
// 声明属性保持回调函数
this.callbacks = []
function resolve(data){
// 判断状态
if(self.PromiseState !== "pending"){
return;
}
// 修改promise状态(promiseState)
self.PromiseState = 'fulfilled'// fulfilled
//设置结果值(promiseResult)
self.PromiseResult = data
//执行异步pending成功的回调
//if(self.callback.onResolved){
// self.callback.onResolved(data)
//}
setTimeout(()=>{
self.callbacks.forEach(item=>{
item.onResolved(data)
})
})
}
function reject(data){
if(self.PromiseState !== "pending")return;
// 修改promise状态(promiseState)
self.PromiseState = 'rejected'
//设置结果值(promiseResult)
self.PromiseResult = data
//执行异步pending成功的回调
//if(self.callback.onRejected){
//self.callback.onRejected(data)
//}
setTimeout(()=>{
self.callbacks.forEach(item=>{
item.onRejected(data)
})
})
}
try{
//执行器函数内部同步调用
executor(resolve,reject)
}catch(e){
//抛出异常时 修改promise对象状态
reject(e)
}
}
//添加then方法
Promise.prototype.then= function(onResolve,onRejected){
const self = this
if(typeof onRejected !== 'function'){
onRejected = reason=>{
throw reason
}
}
if(typeof onResolved !== 'function'){
onResolved = value=>{
return value
} // 也可以简写为 onResolved = value => value
}
return new Promise((resolve,reject)=>{
// 封装函数
function callback(type){
try{
let result = type(self.PromiseResult)
if(result instanceof Promise){
result.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
resolve(result)
}}catch(e){
reject(e)
}
}
//调用回调函数
if(this.PromiseState == 'fulfilled'){
//获取回调函数的执行结果
setTimeout(()=>{
callback(onResolved)
})
}
if(this.PromiseState == 'rejected'){
setTimeout(()=>{
onRejected(this.PromiseResult)
})
}
//判断异步pending状态
if(this.PromiseState == 'pending'){
//保存回调函数
this.callbacks.push({
onResolved:function(){
callback(onResolved)
},
onRejected:function(){
callbacck(onRejected)
}
})
}
})
}
// 添加catch方法 catch方法的封装与异常穿透
Promise.prototype.catch = function(onRejected){
return this.then(undefined,onRejected)
}
// 封装resolve方法
Promise.resolve = function(value){
//返回Promise对象
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
// 状态设置为成功
resolve(value)
}
})
}
//封装Reject方法
Promise.reject = function(reason){
return new Promise((resolve,reject)=>{
reject(reason)
})
}
// promise的all方法
Promise.all = function(promises){
//返回结果为promise对象
return new Promise((resolve,reject)=>{
//遍历
//声明变量
let count = 0;
//存放所有promise对象结果的数组
let arr = [];
for(let i = 0;i<= promises.length;i++){
promises[i].then(v=>{
//得知对象状态是成功
//每个promise对象都成功才能调用resolve方法
// 将当前promise对象结果存入数组中
// arr.push(v) 异步请求 顺序可能不匹配
arr[i] = v;
count++;
if(count == promises.length){
resolve(arr)
}
},r=>{
reject(r)
})
}
})
}
// Promise的race方法
Promise.race = function(promises){
return new Promise((resolve,reject)=>{
for(let i = 0;i<promises.length;i++){
promises[i].then(v=>{
//修改返回对象状态为成功
resolve(v)
},r=>{
reject(r)
})
}
})
}
将Promise 封装成类
// 将构造函数封装成类
class Promise{
//构造方法
constructor(executor){
//添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
//保存实例对象的this值 避免指向window
const self = this
// 声明属性保持回调函数
this.callbacks = []
function resolve(data){
// 判断状态
if(self.PromiseState !== "pending"){
return;
}
// 修改promise状态(promiseState)
self.PromiseState = 'fulfilled'// fulfilled
//设置结果值(promiseResult)
self.PromiseResult = data
//执行异步pending成功的回调
//if(self.callback.onResolved){
// self.callback.onResolved(data)
//}
setTimeout(()=>{
self.callbacks.forEach(item=>{
item.onResolved(data)
})
})
}
function reject(data){
if(self.PromiseState !== "pending")return;
// 修改promise状态(promiseState)
self.PromiseState = 'rejected'
//设置结果值(promiseResult)
self.PromiseResult = data
//执行异步pending成功的回调
//if(self.callback.onRejected){
//self.callback.onRejected(data)
//}
setTimeout(()=>{
self.callbacks.forEach(item=>{
item.onRejected(data)
})
})
}
try{
//执行器函数内部同步调用
executor(resolve,reject)
}catch(e){
//抛出异常时 修改promise对象状态
reject(e)
}
}
//then方法封装
then(onResolved,onRejected){
const self = this
if(typeof onRejected !== 'function'){
onRejected = reason=>{
throw reason
}
}
if(typeof onResolved !== 'function'){
onResolved = value=>{
return value
} // 也可以简写为 onResolved = value => value
}
return new Promise((resolve,reject)=>{
// 封装函数
function callback(type){
try{
let result = type(self.PromiseResult)
if(result instanceof Promise){
result.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
resolve(result)
}}catch(e){
reject(e)
}
}
//调用回调函数
if(this.PromiseState == 'fulfilled'){
//获取回调函数的执行结果
setTimeout(()=>{
callback(onResolved)
})
}
if(this.PromiseState == 'rejected'){
setTimeout(()=>{
onRejected(this.PromiseResult)
})
}
//判断异步pending状态
if(this.PromiseState == 'pending'){
//保存回调函数
this.callbacks.push({
onResolved:function(){
callback(onResolved)
},
onRejected:function(){
callbacck(onRejected)
}
})
}
})
}
//catch方法封装
catch(onRejected){
return this.then(undefined,onRejected)
}
// 封装resolve方法 rsolve属于类 而不是实例对象
static resolve(value){
//返回Promise对象
return new Promise((resolve,reject)=>{
if(value instanceof Promise){
value.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
// 状态设置为成功
resolve(value)
}
})
}
// 封装reject方法
reject(reason){
return new Promise((resolve,reject)=>{
reject(reason)
})
}
// promise的all方法
static all(promises){
//返回结果为promise对象
return new Promise((resolve,reject)=>{
//遍历
//声明变量
let count = 0;
//存放所有promise对象结果的数组
let arr = [];
for(let i = 0;i<= promises.length;i++){
promises[i].then(v=>{
//得知对象状态是成功
//每个promise对象都成功才能调用resolve方法
// 将当前promise对象结果存入数组中
// arr.push(v) 异步请求 顺序可能不匹配
arr[i] = v;
count++;
if(count == promises.length){
resolve(arr)
}
},r=>{
reject(r)
})
}
})
}
// Promise的race方法
static race(promises){
return new Promise((resolve,reject)=>{
for(let i = 0;i<promises.length;i++){
promises[i].then(v=>{
//修改返回对象状态为成功
resolve(v)
},r=>{
reject(r)
})
}
})
}
}