25、初始结构搭建
定义整体结构
基本结构
//声明构造方法
function Promise(executor) {
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
}
resolve与reject结构搭建
//声明构造方法
function Promise(executor) {
//resolve 函数
function resolve(date){
}
//reject 函数
function reject(data){
}
//同步调用执行器函数
executor(resolve, reject)
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
}
resolve与reject内部功能代码
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
//reject 函数
function reject(data){
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
//同步调用执行器函数
executor(resolve, reject)
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
}
throw抛出异常改变状态
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
//reject 函数
function reject(data){
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
}
Promise对象状态只能修改一次
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
}
then方法执行回调
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
onResolved(this.PromiseResult)
}
if(this.PromiseState === "rejected"){
onRejected(this.PromiseResult)
}
}
异步任务回调的执行
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callback = {}
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
if(self.callback.onResolved){
self.callback.onResolved(data)
}
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
if(self.callback.onResolved){
self.callback.onResolved(data)
}
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
onResolved(this.PromiseResult)
}
if(this.PromiseState === "rejected"){
onRejected(this.PromiseResult)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback = {
onResolved : onResolved,
onRejected : onRejected
}
}
}
指定多个回调的实现
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
self.callbacks.forEach(item=>{
item.onRejected(data)
})
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
onResolved(this.PromiseResult)
}
if(this.PromiseState === "rejected"){
onRejected(this.PromiseResult)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : onResolved,
onRejected : onRejected
})
}
}
then方法返回结果的实现
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
self.callbacks.forEach(item=>{
item.onRejected(data)
})
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
return new Promise((resolve, reject) => {
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
try{
//获取回调函数的执行结果
let result = onResolved(this.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
if(this.PromiseState === "rejected"){
onRejected(this.PromiseResult)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : onResolved,
onRejected : onRejected
})
}
})
}
异步修改状态then方法结果返回
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
self.callbacks.forEach(item=>{
item.onRejected(data)
})
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this
return new Promise((resolve, reject) => {
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
try{
//获取回调函数的执行结果
let result = onResolved(this.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
if(this.PromiseState === "rejected"){
onRejected(this.PromiseResult)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : function(){
try{
//执行成功的回调函数
let result = onResolved(self.PromiseResult)
if(result instanceof Promise){
result.then(v=>{
resolve(v)
}, r=>{
reject(v)
})
}
else{
resolve(result)
}
}
catch(e){
reject(e)
}
},
onRejected : function(){
try{
//执行失败的回调函数
let result = onRejected(self.PromiseResult)
if(result instanceof Promise){
result.then(v=>{
resolve(v)
}, r=>{
reject(v)
})
}
else{
resolve(result)
}
}
catch(e){
reject(e)
}
}
})
}
})
}
then方法完善与优化
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
self.callbacks.forEach(item=>{
item.onRejected(data)
})
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this
return new Promise((resolve, reject) => {
//封装函数
function callback(type){
try{
//获取回调函数的执行结果
let result = type(self.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
callback(onResolved)
}
if(this.PromiseState === "rejected"){
callback(onRejected)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : function(){
callback(onResolved)
},
onRejected : function(){
callback(onRejected)
}
})
}
})
}
catch方法 异常穿透与值传递
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
self.callbacks.forEach(item=>{
item.onRejected(data)
})
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this
if(typeof onRejected !== "function"){
onRejected = reason => {
throw reason
}
}
if(typeof onResolved !== "function"){
onResolved = value => value
}
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type){
try{
//获取回调函数的执行结果
let result = type(self.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
callback(onResolved)
}
if(this.PromiseState === "rejected"){
callback(onRejected)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : function(){
callback(onResolved)
},
onRejected : function(){
callback(onRejected)
}
})
}
})
}
//添加catch方法
Promise.prototype.catch = function(onRejected){
return this.then(undefined, onRejected)
}
resolve方法封装
//声明构造方法
function Promise(executor) {
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
self.callbacks.forEach(item=>{
item.onRejected(data)
})
}
try{
//同步调用执行器函数
executor(resolve, reject)
}catch(e){
//修改promise对象状态为“失败”
reject(e)
}
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this
if(typeof onRejected !== "function"){
onRejected = reason => {
throw reason
}
}
if(typeof onResolved !== "function"){
onResolved = value => value
}
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type){
try{
//获取回调函数的执行结果
let result = type(self.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
callback(onResolved)
}
if(this.PromiseState === "rejected"){
callback(onRejected)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : function(){
callback(onResolved)
},
onRejected : function(){
callback(onRejected)
}
})
}
})
}
//添加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方法封装
//添加 reject方法
Promise.reject = function (reason){
return new Promise((resolve, reject) => {
reject(reason)
})
}
all方法封装
//添加all方法
Promise.all = function (promises){
//返回结果为promise对象
return new Promise((resolve, reject) => {
// 声明变量
let count = 0
let arr = []
//遍历
for(let i = 0; i < promise.length; i++){
promises[i].then(v=>{
//得知对象的状态是成功
//每个promise对象都成功,
count ++
//将当前promise对象成功的结果,存入到数组中
arr[i] = v
if(count == promises.length){
//修改状态
resolve(arr)
}
}, r=>{
reject(r)
})
}
})
}
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)
})
}
})
}
then方法回调的异步执行
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
setTimeout(()=>{
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
})
}
//添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
const self = this
if(typeof onRejected !== "function"){
onRejected = reason => {
throw reason
}
}
if(typeof onResolved !== "function"){
onResolved = value => value
}
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type){
try{
//获取回调函数的执行结果
let result = type(self.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
setTimeout(() => {
callback(onResolved)
})
}
if(this.PromiseState === "rejected"){
setTimeout(() => {
callback(onRejected)
})
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : function(){
callback(onResolved)
},
onRejected : function(){
callback(onRejected)
}
})
}
})
}
Class版本的实现
class Promise {
//构造方法
constructor(){
//添加属性
this.PromiseState = "pdnding"
this.PromiseResult = null
//声明属性
this.callbacks = []
//保存实例对象的this的值
const self = this
//resolve 函数
function resolve(date){
//判断
if(self.PromiseState !== "pending") return
console.log(this) //会发现this是指向windows
//1、修改对象状态(promiseState)
self.PromiseState = "fulfilled"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
setTimeout(()=>{
//调用成功的回调函数
self.callbacks.forEach(item=>{
item.onResolved(data)
})
})
}
//reject 函数
function reject(data){
//判断
if(self.PromiseState !== "pending") return
//1、修改对象状态(promiseState)
self.PromiseState = "rejected"
//2、设置对象结果值(promiseResult)
self.PromiseResult = data
//调用失败的回调函数
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 => value
}
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type){
try{
//获取回调函数的执行结果
let result = type(self.PromiseResult)
if(result instanceof Promise){
//如果是Promise类型的对象
return.then(v=>{
resolve(v)
}, r=>{
reject(r)
})
}
else{
//结果的对象状态为成功
resolve(result)
}
}
catch(e){
reject(e)
}
}
//调用回调函数 == PromiseState
if(this.PromiseState === "fulfilled"){
callback(onResolved)
}
if(this.PromiseState === "rejected"){
callback(onRejected)
}
//判断pending 状态
if(this.PromiseState == "pending"){
//保存回调函数
this.callback.push({
onResolved : function(){
callback(onResolved)
},
onRejected : function(){
callback(onRejected)
}
})
}
})
}
//catch方法
catch(onRejected){
return this.then(undefined, onRejected)
}
//resolve方法
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方法
static reject(reason){
return new Promise((resolve, reject) => {
reject(reason)
})
}
//all方法
static all(promises){
//返回结果为promise对象
return new Promise((resolve, reject) => {
// 声明变量
let count = 0
let arr = []
//遍历
for(let i = 0; i < promise.length; i++){
promises[i].then(v=>{
//得知对象的状态是成功
//每个promise对象都成功,
count ++
//将当前promise对象成功的结果,存入到数组中
arr[i] = v
if(count == promises.length){
//修改状态
resolve(arr)
}
}, r=>{
reject(r)
})
}
})
}
race(promises){
return new Promise((resolve, reject) => {
for(let i=0; i<promises.length; i++){
promises[i].then(v=>{
//修改返回对象的状态为:成功
resolve(v)
},r=>{
//修改返回对象的状态为:失败
reject(r)
})
}
})
}
}