完整实现原生Promise

最新推荐文章于 2022-07-17 09:47:01 发布
最新推荐文章于 2022-07-17 09:47:01 发布
阅读量665 收藏 3
点赞数 2
分类专栏： JS面试 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46269977/article/details/115505721
版权
手写前需要了解这些

1.什么是宏任务

我们都知道JS是单线程的，但是一些高耗时操作就带来了进程阻塞的问题，为了解决这个问题，JS有两种任务的执行模式，同步模式和异步模式。

在异步模式下，创建异步任务主要分为宏任务和微任务两种，宏任务是由宿主（浏览器、Node）发起的，而微任务由JS自身发起。

宏任务与微任务的几种创建方式 👇

宏任务（Macrotask）微任务（Microtask）
setTimeoutrequestAnimationFrame（有争议）
setIntervalMutationObserver（浏览器环境）
MessageChannelPromise.[ then/catch/finally ]
I/O，事件队列process.nextTick（Node环境）
setImmediate（Node环境）queueMicrotask
script（整体代码块）

如何理解script(整体代码块)是个宏任务呢

实际上如果同时存在两个 script 代码块，会首先在执行第一个 script 代码块中的同步代码，如果这个过程中创建了微任务并进入了微任务队列，第一个 script 同步代码执行完之后，会首先去清空微任务队列，再去开启第二个 script 代码块的执行。所以这里应该就可以理解 script（整体代码块）为什么会是宏任务。

2.什么是EventLoop

在这里插入图片描述
1.判断宏任务队列是否为空

  • 不空 -> 执行最早进入队列的任务 -> 执行下一步
  • 空 -> 执行下一步

2.判断微任务队列是否为空

  • 不空 -> 执行最早进入队列的任务 -> 继续检查微任务队列空不空
  • 空 -> 执行下一步

因为首次执行宏队列中会有 script（整体代码块）任务，所以实际上就是 Js 解析完成后，在异步任务中，会先执行完所有的微任务，这里也是很多面试题喜欢考察的。需要注意的是，新创建的微任务会立即进入微任务队列排队执行，不需要等待下一次轮回

Promise核心逻辑实现

我们先简单实现一下 Promise 的基础功能。先看原生 Promise 实现的 🌰，第一步我们要完成相同的功能。

原生🌰 👇

const promise = new Promise((resolve, reject) => {
   resolve('success')
   reject('err')
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

// 输出 resolve success

分析一下基本原理

  • 1.Promise是一个类，在执行这个类的时候会传入一个执行器，这个执行器会立即执行

  • 2.Promise会有三种状态

    • Pending 等待
    • Fulfilled 完成
    • Rejected 失败

  • 3.状态只能由Pending -> Fulfilled 或者 Pending -> Rejected, 也就是说一旦状态发生改变，便不可以二次修改

  • 4.Promise中使用resolve和reject两个函数来更改状态

  • 5.then方法内部做的事情就是状态判断

    • 如果是成功状态，调用成功的回调函数
    • 如果是失败状态，调用失败的回调函数

下面开始实现:

1.创建MyPromise类，传入执行器executor

// 新建 MyPromise.js

// 新建 MyPromise 类
class MyPromise {
  constructor(executor){
    // executor 是一个执行器，进入会立即执行
    executor() 
  }
}

2.executor传入resolve和reject方法

// MyPromise.js

// 新建 MyPromise 类
class MyPromise {
  constructor(executor){
    // executor 是一个执行器，进入会立即执行
    // 并传入resolve和reject方法
    executor(this.resolve, this.reject) 
  }
  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  // 更改成功后的状态
  resolve = () => {}
  // 更改失败后的状态
  reject = () => {}
}

3.状态和结果的管理

// MyPromise.js

// 先定义三个常量表示状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

// 新建 MyPromise 类
class MyPromise {
  constructor(executor){
    // executor 是一个执行器，进入会立即执行
    // 并传入resolve和reject方法
    executor(this.resolve, this.reject)
  }

  // 储存状态的变量，初始值是 pending
  status = PENDING;

  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  // 成功之后的值
  value = null;
  // 失败之后的原因
  reason = null;

  // 更改成功后的状态
  resolve = (value) => {
    // 只有状态是等待，才执行状态修改
    if (this.status === PENDING) {
      // 状态修改为成功
      this.status = FULFILLED;
      // 保存成功之后的值
      this.value = value;
    }
  }

  // 更改失败后的状态
  reject = (reason) => {
    // 只有状态是等待，才执行状态修改
    if (this.status === PENDING) {
      // 状态成功为失败
      this.status = REJECTED;
      // 保存失败后的原因
      this.reason = reason;
    }
  }
}

4.then的简单实现

// MyPromise.js

then(onFulfilled, onRejected) {
  // 判断状态
  if (this.status === FULFILLED) {
    // 调用成功回调，并且把值返回
    onFulfilled(this.value);
  } else if (this.status === REJECTED) {
    // 调用失败回调，并且把原因返回
    onRejected(this.reason);
  }
}

5.使用module.exports对外暴露MyPromise类

// MyPromise.js
module.exports = MyPromise

目前实现的完整代码

// MyPromise.js

// 先定义三个常量表示状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

// 新建 MyPromise 类
class MyPromise {
  constructor(executor){
    // executor 是一个执行器，进入会立即执行
    // 并传入resolve和reject方法
    executor(this.resolve, this.reject)
  }

  // 储存状态的变量，初始值是 pending
  status = PENDING;

  // resolve和reject为什么要用箭头函数？
  // 如果直接调用的话，普通函数this指向的是window或者undefined
  // 用箭头函数就可以让this指向当前实例对象
  // 成功之后的值
  value = null;
  // 失败之后的原因
  reason = null;

  // 更改成功后的状态
  resolve = (value) => {
    // 只有状态是等待，才执行状态修改
    if (this.status === PENDING) {
      // 状态修改为成功
      this.status = FULFILLED;
      // 保存成功之后的值
      this.value = value;
    }
  }

  // 更改失败后的状态
  reject = (reason) => {
    // 只有状态是等待，才执行状态修改
    if (this.status === PENDING) {
      // 状态成功为失败
      this.status = REJECTED;
      // 保存失败后的原因
      this.reason = reason;
    }
  }

  then(onFulfilled, onRejected) {
    // 判断状态
    if (this.status === FULFILLED) {
      // 调用成功回调，并且把值返回
      onFulfilled(this.value);
    } else if (this.status === REJECTED) {
      // 调用失败回调，并且把原因返回
      onRejected(this.reason);
    }
  }
}

module.exports = MyPromise

使用我的手写代码执行一下上面那个🌰

// 新建 test.js

// 引入我们的 MyPromise.js
const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
   resolve('success')
   reject('err')
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

执行结果：resolve success

在Promise类中加入异步逻辑

上面代码还没有经过异步处理，如果有异步逻辑加如来会带来一些问题，例如：

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000); 
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

结果: 什么信息也没有打印出来

分析原因: 主线程代码立即执行，setTimeout 是异步代码，then 会马上执行，这个时候判断 Promise 状态，状态是 Pending，然而之前并没有判断等待这个状态

此时我们需要处理一下Pending状态，改造一下之前的代码

1.缓存成功与失败的回调

// MyPromise.js

// MyPromise 类中新增
// 存储成功回调函数
onFulfilledCallback = null;
// 存储失败回调函数
onRejectedCallback = null;

2.then方法中的Pending处理

// MyPromise.js

then(onFulfilled, onRejected) {
  // 判断状态
  if (this.status === FULFILLED) {
    // 调用成功回调，并且把值返回
    onFulfilled(this.value);
  } else if (this.status === REJECTED) {
    // 调用失败回调，并且把原因返回
    onRejected(this.reason);
  } else if (this.status === PENDING) {
    // ==== 新增 ====
    // 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
    // 等到执行成功失败函数的时候再传递
    this.onFulfilledCallback = onFulfilled;
    this.onRejectedCallback = onRejected;
  }
}

3.resolve和reject中调用回调函数

// MyPromise.js

// 更改成功后的状态
resolve = (value) => {
  // 只有状态是等待，才执行状态修改
  if (this.status === PENDING) {
    // 状态修改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // ==== 新增 ====
    // 判断成功回调是否存在，如果存在就调用
    this.onFulfilledCallback && this.onFulfilledCallback(value);
  }
}

// MyPromise.js
// 更改失败后的状态
reject = (reason) => {
  // 只有状态是等待，才执行状态修改
  if (this.status === PENDING) {
    // 状态成功为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
    // ==== 新增 ====
    // 判断失败回调是否存在，如果存在就调用
    this.onRejectedCallback && this.onRejectedCallback(reason)
  }
}

我们再执行一下上面的🌰

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000); 
})

promise.then(value => {
  console.log('resolve', value)
}, reason => {
  console.log('reject', reason)
})

// 等待 2s 输出 resolve success

目前已经可以简单处理异步问题了

实现then方法多次调用添加多个处理函数

Promise 的 then 方法是可以被多次调用的。这里如果有三个 then 的调用，如果是同步回调，那么直接返回当前的值就行；如果是异步回调，那么保存的成功失败的回调，需要用不同的值保存，因为都互不相同。之前的代码需要改进。

先看一个🌰

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000); 
})

promise.then(value => {
  console.log(1)
  console.log('resolve', value)
})
 
promise.then(value => {
  console.log(2)
  console.log('resolve', value)
})

promise.then(value => {
  console.log(3)
  console.log('resolve', value)
})

// 3
// resolve success

目前的代码只能输出：3 resolve success

我们应该一视同仁，保证所有 then 中的回调函数都可以执行

1.MyPromise类中新增两个数组

// MyPromise.js

// 存储成功回调函数
// onFulfilledCallback = null;
onFulfilledCallbacks = [];
// 存储失败回调函数
// onRejectedCallback = null;
onRejectedCallbacks = [];

2.回调函数存入数组中

// MyPromise.js

then(onFulfilled, onRejected) {
  // 判断状态
  if (this.status === FULFILLED) {
    // 调用成功回调，并且把值返回
    onFulfilled(this.value);
  } else if (this.status === REJECTED) {
    // 调用失败回调，并且把原因返回
    onRejected(this.reason);
  } else if (this.status === PENDING) {
    // ==== 新增 ====
    // 因为不知道后面状态的变化，这里先将成功回调和失败回调存储起来
    // 等待后续调用
    this.onFulfilledCallbacks.push(onFulfilled);
    this.onRejectedCallbacks.push(onRejected);
  }
}

3.循环调用成功和失败的回调函数

// MyPromise.js

// 更改成功后的状态
resolve = (value) => {
  // 只有状态是等待，才执行状态修改
  if (this.status === PENDING) {
    // 状态修改为成功
    this.status = FULFILLED;
    // 保存成功之后的值
    this.value = value;
    // ==== 新增 ====
    // resolve里面将所有成功的回调拿出来执行
    while (this.onFulfilledCallbacks.length) {
      // Array.shift() 取出数组第一个元素，然后（）调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
      this.onFulfilledCallbacks.shift()(value)
    }
  }
}

// MyPromise.js

// 更改失败后的状态
reject = (reason) => {
  // 只有状态是等待，才执行状态修改
  if (this.status === PENDING) {
    // 状态成功为失败
    this.status = REJECTED;
    // 保存失败后的原因
    this.reason = reason;
    // ==== 新增 ====
    // resolve里面将所有失败的回调拿出来执行
    while (this.onRejectedCallbacks.length) {
      this.onRejectedCallbacks.shift()(reason)
    }
  }
}

再来运行一下，看看结果👇

1
resolve success
2
resolve success
3
resolve success
实现then方法的链式调用
  • then 方法要链式调用那么就需要返回一个 Promise对象
  • then 方法里面 return 一个返回值作为下一个 then 方法的参数，如果是 return 一个 Promise对象，那么就需要判断它的状态

举个栗子 🌰

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  // 目前这里只处理同步的问题
  resolve('success')
})

function other () {
  return new MyPromise((resolve, reject) =>{
    resolve('other')
  })
}
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  return other()
}).then(value => {
  console.log(2)
  console.log('resolve', value)
})

用目前的手写代码运行的时候会报错无法链式调用

}).then(value => {
  ^
  
TypeError: Cannot read property 'then' of undefined

接着改

// MyPromise.js

class MyPromise {
  then(onFulfilled, onRejected) {
    // ==== 新增 ====
    // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
    const promise2 = new MyPromise((resolve, reject) => {
      // 这里的内容在执行器中，会立即执行
      if (this.status === FULFILLED) {
        // 获取成功回调函数的执行结果
        const x = onFulfilled(this.value);
        // 传入 resolvePromise 集中处理
        resolvePromise(x, resolve, reject);
      } else if (this.status === REJECTED) {
        onRejected(this.reason);
      } else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(onFulfilled);
        this.onRejectedCallbacks.push(onRejected);
      }
    }) 
    
    return promise2;
  }
}

function resolvePromise(x, resolve, reject) {
  // 判断x是不是 MyPromise 实例对象
  if(x instanceof MyPromise) {
    // 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
    // x.then(value => resolve(value), reason => reject(reason))
    // 简化之后
    x.then(resolve, reject)
  } else{
    // 普通值
    resolve(x)
  }
}

改造后执行一下上面的🌰

1
resolve success
2 
resolve other
then方法链式调用识别Promise是否返回自己

如果 then 方法返回的是自己的 Promise 对象，则会发生循环调用，这个时候程序会报错

例如下面这种情况👇

// test.js
const promise = new Promise((resolve,reject) => {
	resolve(100)
})
const p1 = promise.then(value => {
	console.log(value)
	return p1
})

使用原生 Promise 执行这个代码，会报类型错误

100
Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

继续改

// MyPromise.js

class MyPromise {
  then(onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        const x = onFulfilled(this.value);
        // resolvePromise 集中处理，将 promise2 传入
        resolvePromise(promise2, x, resolve, reject);
      } else if (this.status === REJECTED) {
        onRejected(this.reason);
      } else if (this.status === PENDING) {
        this.onFulfilledCallbacks.push(onFulfilled);
        this.onRejectedCallbacks.push(onRejected);
      }
    }) 
    
    return promise2;
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果相等了，说明return的是自己，抛出类型错误并返回
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  }
  if(x instanceof MyPromise) {
    x.then(resolve, reject)
  } else{
    resolve(x)
  }
}

执行一下，报错了

resolvePromise(promise2, x, resolve, reject);
                       ^
ReferenceError: Cannot access 'promise2' before initialization

从错误提示可以看出，我们必须要等 promise2 完成初始化。这个时候我们就要用上宏微任务和事件循环的知识了，这里就需要创建一个异步函数去等待 promise2 完成初始化，我们需要创建微任务使用 queueMicrotask

// MyPromise.js

class MyPromise {
  then(onFulfilled, onRejected) {
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // ==== 新增 ====
        // 创建一个微任务等待 promise2 完成初始化
        queueMicrotask(() => {
          // 获取成功回调函数的执行结果
          const x = onFulfilled(this.value);
          // 传入 resolvePromise 集中处理
          resolvePromise(promise2, x, resolve, reject);
        })  
      } else if (this.status === REJECTED) {
    }) 
    
    return promise2;
  }
}

执行一下

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
    resolve('success')
})
 
// 这个时候将promise定义一个p1，然后返回的时候返回p1这个promise
const p1 = promise.then(value => {
   console.log(1)
   console.log('resolve', value)
   return p1
})
 
// 运行的时候会走reject
p1.then(value => {
  console.log(2)
  console.log('resolve', value)
}, reason => {
  console.log(3)
  console.log(reason.message)
})

这里得到我们的结果 👇

1
resolve success
3
Chaining cycle detected for promise #<Promise>
捕获错误及then链式调用其他状态代码补充

目前还缺少一个重要的环节，就是我们的错误捕获还没有处理

1.捕获执行器错误

捕获执行器中的代码，如果执行器中代码有错误，那么Promise状态要变为失败

constructor(executor) {
    // ==== 新增 ====
    // executor 是一个执行器，进入会立即执行
    // 并传入resolve和reject方法
    try {
        executor(this.resolve, this.reject)
    } catch (error) {
        // 如果有错误，就直接执行 reject
        this.reject(error)
    }
}

验证一下:

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
    // resolve('success')
    throw new Error('执行器错误')
})
 
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
}, reason => {
  console.log(2)
  console.log(reason.message)
})

执行结果 👇

2
执行器错误

2.then执行的时候错误捕获

// MyPromise.js

then(onFulfilled, onRejected) {
  // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
  const promise2 = new MyPromise((resolve, reject) => {
    // 判断状态
    if (this.status === FULFILLED) {
      // 创建一个微任务等待 promise2 完成初始化
      queueMicrotask(() => {
        // ==== 新增 ====
        try {
          // 获取成功回调函数的执行结果
          const x = onFulfilled(this.value);
          // 传入 resolvePromise 集中处理
          resolvePromise(promise2, x, resolve, reject);
        } catch (error) {
          reject(error)
        }  
      })  
    } else if (this.status === REJECTED) {
      // 调用失败回调，并且把原因返回
      onRejected(this.reason);
    } else if (this.status === PENDING) {
      // 等待
      // 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
      // 等到执行成功失败函数的时候再传递
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }
  }) 
  
  return promise2;
}

验证一下:

// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
    resolve('success')
    // throw new Error('执行器错误')
 })
 
// 第一个then方法中的错误要在第二个then方法中捕获到
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
  throw new Error('then error')
}, reason => {
  console.log(2)
  console.log(reason.message)
}).then(value => {
  console.log(3)
  console.log(value);
}, reason => {
  console.log(4)
  console.log(reason.message)
})

执行结果 👇

1
resolve success
4 
then error

这里成功打印了1中抛出的错误 then error

残靠fulfilled状态下的处理方式，对rejected和pending状态进行改造

改造内容:

  • 1.增加异步状态下的链式调用
  • 2.增加回调函数执行结果的判断
  • 3.增加识别Promise是否返回自己
  • 4.增加错误捕获
// MyPromise.js

then(onFulfilled, onRejected) {
  // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
  const promise2 = new MyPromise((resolve, reject) => {
    // 判断状态
    if (this.status === FULFILLED) {
      // 创建一个微任务等待 promise2 完成初始化
      queueMicrotask(() => {
        try {
          // 获取成功回调函数的执行结果
          const x = onFulfilled(this.value);
          // 传入 resolvePromise 集中处理
          resolvePromise(promise2, x, resolve, reject);
        } catch (error) {
          reject(error)
        } 
      })  
    } else if (this.status === REJECTED) { 
      // ==== 新增 ====
      // 创建一个微任务等待 promise2 完成初始化
      queueMicrotask(() => {
        try {
          // 调用失败回调，并且把原因返回
          const x = onRejected(this.reason);
          // 传入 resolvePromise 集中处理
          resolvePromise(promise2, x, resolve, reject);
        } catch (error) {
          reject(error)
        } 
      }) 
    } else if (this.status === PENDING) {
      // 等待
      // 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
      // 等到执行成功失败函数的时候再传递
      this.onFulfilledCallbacks.push(() => {
        // ==== 新增 ====
        queueMicrotask(() => {
          try {
            // 获取成功回调函数的执行结果
            const x = onFulfilled(this.value);
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error)
          } 
        }) 
      });
      this.onRejectedCallbacks.push(() => {
        // ==== 新增 ====
        queueMicrotask(() => {
          try {
            // 调用失败回调，并且把原因返回
            const x = onRejected(this.reason);
            // 传入 resolvePromise 集中处理
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error)
          } 
        }) 
      });
    }
  }) 
  
  return promise2;
}
then中的参数变为可选

上面我们处理 then 方法的时候都是默认传入 onFulfilled、onRejected 两个回调函数，但是实际上原生 Promise 是可以选择参数的单传或者不传，都不会影响执行。

例如下面这种 👇

// test.js

const promise = new Promise((resolve, reject) => {
  resolve(100)
})

promise
  .then()
  .then()
  .then()
  .then(value => console.log(value))

// 输出 100

所以我们需要对 then 方法做一点调整

// MyPromise.js

then(onFulfilled, onRejected) {
  // 如果不传，就使用默认函数
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => {throw reason};
}

验证一下:

  • resolve之后
// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  resolve('whl')
})
 
promise.then().then().then(value => console.log(value))

// 打印 whl
  • reject之后
// test.js

const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
  reject('err')
})
 
promise.then().then().then(value => console.log(value), reason => console.log(reason))

// 打印 err
实现resolve和reject的静态调用

使用 return Promise.resolve 来返回一个 Promise 对象，我们用现在的手写代码尝试一下

const MyPromise = require('./MyPromise')

MyPromise.resolve().then(() => {
    console.log(0);
    return MyPromise.resolve(4);
}).then((res) => {
    console.log(res)
})

结果报错了

MyPromise.resolve().then(() => {
          ^
TypeError: MyPromise.resolve is not a function

除了 Promise.resolve 还有 Promise.reject 的用法，我们都要去支持，接下来我们来实现一下

// MyPromise.js

MyPromise {
  // resolve 静态方法
  static resolve (parameter) {
    // 如果传入 MyPromise 就直接返回
    if (parameter instanceof MyPromise) {
      return parameter;
    }

    // 转成常规方式
    return new MyPromise(resolve =>  {
      resolve(parameter);
    });
  }

  // reject 静态方法
  static reject (reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }
}

这样我们再测试上面的 🌰 就不会有问题啦

执行结果 👇

0
4

完整代码如下:

在这里插入图片描述

一颗腐烂的橘子
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Promise的简单实现
08-11
这个实现可能不包含完整的API，但会涵盖Promise的核心概念和基本工作原理。 描述提到这是一个不含任何第三方插件的实现，这意味着我们将专注于JavaScript原生语法来构建Promise。这通常涉及到函数、闭包、回调以及...
原生实现promise
qingbaicai的博客
10-14 712
一、准备工作 要实现promise，先看看promise是什么、做了哪些。 Promise对象用于表示一个异步操作的最终完成 (或失败), 及其结果值，有以下两个特点: 1、对象的状态不受外界影响。 Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 2、一旦状态改变，就不会再变，任何时...
原生js写promise函数
celi_echo的博客
08-27 984
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /* *Promise实现思路 * ...
10分钟原生实现promise、all、allSettled函数
程序媛的梦工厂
07-23 1280
10分钟原生实现promise、all、allSettled函数
原生JS实现Promise（详解）
weixin_46726346的博客
08-16 3480
摘要 首先呢，Promise是异步中比较重要的知识点，学习的最好方法就是掌握它的基本原理。 所以这一篇主要说一下如何用JS来实现一个自己的promise。 构造函数 首先我们来看一下我们是如何使用promise的，我们在实例化对象是这么使用的： let p1 = new Promise((resolve, reject) => { let random = Math.floor(Math.random() * 10); if (random > 4) {
这 10 个片段，有助于你理解 ES 中的 Promise
高先生的猫
08-03 724
在开发中，了解JavaScript和 Promise 基础，有助于提高我们的编码技能，今天，我们一起来看看下面的 10 片段，相信看完这 10 个片段有助于我们对 Promise 的理解。 片段1： const prom = new Promise((res, rej) => { console.log('first'); res(); console.log('second'); }); prom.then(() => { console.log('third'); ..
js代码-Promise的同步实现
07-14
了解Promise的同步实现有助于深入理解异步编程的核心思想，同时也可以帮助开发者在没有ES6原生Promise支持的环境中实现类似功能。不过，需要注意的是，同步实现的Promise可能无法完全模拟原生Promise的所有特性，...
js代码-实现个Promise
07-16
在实际开发中，建议使用原生Promise或成熟的库，如bluebird，它们提供了更完整、更优化的实现。 ``` 通过以上内容，我们可以看到，实现一个基本的Promise涉及到了状态管理、回调函数存储和链式调用的逻辑。然而，这...
原生JS实现红包小游戏
11-27
- 如果游戏需要模拟网络延迟，可以使用`setTimeout`或`Promise`来实现异步效果，让用户有等待红包分配的感觉。 7. **事件冒泡与事件捕获**： - 在多层嵌套元素结构中，理解事件冒泡和事件捕获机制对于正确处理...
Jquery promise实现一张一张加载图片
11-22
对于开发人员来说，这种非线性执行的编程会让开发者觉得难以掌控，而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象，年底即将发布的ES6也将原生实现Promise。 在javascript...
浅析Javascript ES6中的原生Promise
10-21
ES6标准出炉之前，一个幽灵，回调的幽灵，游荡在JavaScript世界。正所谓世界本没有回调，写的人多了也就有了。接下来就来简单介绍Javascript ES6中的原生Promise，有需要的可以参考借鉴。
promise的原生实现
qq_41672008的博客
09-09 642
promise的原生实现 这篇文章不讲promise的作用是什么，promise的出现不仅仅是解决回调地狱的，我会在之后用一篇文章来讲讲promise的作用和意义，这篇文章只讲promise的实现 了解promise的特性 var pr = new Promise(function(resolve,reject){ resolve(3) }) console.log(pr) 本人建...
2021-05-27
weixin_44194685的博客
05-28 112
目录 es6若干方法总结 对象扩展方法 1.Object.assign() 该方法可以将多个源对象属性复制到一个目标对象中 const obj1 = { a: 123, b: 234 } const obj2 = { a: 456, c: 234 } const result = Object.assign(obj1, obj2) console.log(result) // { a:456, b:234, c:234 } console.log(r...
彻底掌握 Promise-原生Promise的实现(二) Promise的链式调用
记得抬头微笑
03-23 5877
在 彻底掌握 Promise- 原生 Promise 的实现(一)已经初步实现了 promise 的简易版本，这距离实现完整版本的 Promise 还有一段距离，下面我们将在简易版本的基础上增加 Promise 的链式调用 异步情况下 Promise 的链式调用 处理函数执行的异常情况 以下代码都是对简易版本 Promise 去实现的，所以这里只显示变更的地方，完整版本在文末贴出 Promise 的链式调用 下面我们依然还是通过逆解析的方式去通过 Promise 的链式调用的用法.....
es6 promise 源码解析
qq_42389674的博客
07-17 352
promise 源码解析
promise专题--原生promise基本用法
weixin_43737355的博客
10-30 335
为什么要用promise？ 说到promise就绕不开同步和异步的问题，那么什么是同步什么是异步？ 同步就是比如你烧了一壶水，但是此时你想看电视，但是你只能等这壶水烧开了，你才能去看电视，也就是事件是一件完成以后才能去做下一件，这个是同步。 异步就是我再烧水的同时，我也去看电视，当水烧开后发出声音，此时这个声音就相当于个回调函数，告诉我们这个水烧开了，事情做完了，然后我们再去看电视，这个就是异步。 但是当我们异步请求，假如一个需求要请求3个接口，第二个接口参数依赖于第一个的返回值，第三个接口的参数依赖于第
原生 js 实现 es6 中的 Promise
HumorMrChen的博客
07-22 5783
        es6 一经推出，Promise 就一直被大家所关注。那么，为什么 Promise 会被大家这样关注呢？答案很简单，Promise 优化了回调函数的用法，让原本需要纵向一层一层嵌套的回调函数实现了横向的调用，也就是链式调用。        既然  Promise 这么好用，那它背后的的实现原理是什么呢？要知道，作为一个有追求的程序猿，不仅要知其然，还要知其所以然，ok ，下面我就...
原生JS实现Promise
九阴与九阳
10-22 5314
ES6中Promise可以说很大情况下改善了异步回调的嵌套问题，那么如果我们自己去写一个类似Promise的库应该怎么去写？我们先看一下Promise的特点第一：Promise构造函数接受一个函数作为参数，函数里面有两个参数resolve和reject分别作为执行成功或者执行失败的函数 var promise=new Promsie(function(resolve,rejec){ if(/
用promise封装原生ajax, 实现axios
最新发布
06-08
好的，下面是用 Promise 封装原生 Ajax 实现 Axios 的代码： ```javascript function axios(config) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(config....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值