一、手写源码之 Promise

Souleigh ✨ 等级 1172 0 0

版本一,构造函数

function MyPromise(fn = () => {}) {
  // const this = {}
  this.state = 'pending'
  this.value = undefined

  const resolve = (value) => {
    if (this.state === 'pending') {
      this.state = 'fulfilled'
      this.value = value
    }
  }
  const reject = (value) => {
    if (this.state === 'pending') {
      this.state = 'rejected'
      this.value = value
    }
  }

  this.then = (onFulfilled, onRejected) => {
    switch (this.state) {
      case 'fulfilled':
        onFulfilled(this.value)
        break
      case 'rejected':
        onRejected(this.value)
        break
      default:
        onRejected(this.value);
    }
  }

  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

版本二,class类

class MyPromise {
  constructor (fn) {
    this.state = 'pending'
    this.value = undefined
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
      }
    }
    let reject = value => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.value = value
      }
    }
    // 自动执行函数
    try {
      fn(resolve, reject)
    } catch (e) {
      reject(e)
    }
  }
  // then
  then(onFulfilled, onRejected) {
    switch (this.state) {
      case 'fulfilled':
        onFulfilled(this.value)
        break
      case 'rejected':
        onRejected(this.value)
        break
      default:
        onRejected(this.value);
    }
  }
}

实例化执行

new MyPromise((resolve, reject) => {
  console.log('in Promise...')
  resolve(111)
}).then((val) => {
  console.log('resolve', val)
}, (e) => {
  console.log('rejected', e)
})
收藏
评论区

相关推荐

一、手写源码之 Promise
版本一,构造函数 javascript function MyPromise(fn () {}) { // const this {} this.state 'pending' this.value undefined const resolve (value) { if (this.state
Promise从入门到拿Offer之手写Promise
1、Promise构造函数的实现Promise构造函数用来声明示例对象,需要传入一个执行器函数。其中包括resolve函数和reject函数,以及几个重要的属性:状态属性、结果属性和回调函数队列。构造函数的基本框架 resolve函数用于异步处理成功后调用的函数。其中包括验证对象状态修改次数,修改promise实例对象状态,异步调用成功的回调函数
盘点JavaScript中async/await知识
大家好,我是进阶学习者。一、前言Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。 二、Async function让以 async 这个关键字开始。它可以被放置在一个函数前面。如下所示:async function f() return 1;在函数前面的 “async” 这个单词表达了一个简单的
ES6 Promise
Promise ======= * promise是异步编程的一种解决方案 ### 1 什么是异步? 异步模式,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。 "异步模式"非常重要。在浏
ES6 Promise 对象扯谈
new Promise( /* executor */ function(resolve, reject) { ... } ); Promise的构造函数接收一个函数作为参数,函数里面传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来
ES6 Promise 让异步函数顺序执行
应用 ES6 的 内置对象 Promise, 让异步函数 按顺序执行的例子 如下: ![](https://oscimg.oschina.net/oscnet/9d7da385127c5df3cdf50b984cc4bca58c7.jpg) 上边 是四个用Promise 处理过的 异步执行的函数: fn1、fn2、fn3、fn4 下面,让其按顺序执行
ES6中的Promise和Generator详解
简介 == ES6中除了上篇文章讲过的语法新特性和一些新的API之外,还有两个非常重要的新特性就是Promise和Generator,今天我们将会详细讲解一下这两个新特性。 Promise ======= 什么是Promise ---------- Promise 是异步编程的一种解决方案,比传统的解决方案“回调函数和事件”更合理和更强大。 所谓P
JS微任务 宏任务,Promise、setTimeout、setImmediate运行顺序实测
结论如下 1. 虽然理论上应当先运行Promise,再运行setTimeout。但是由于历史版本或使用polyfill,使得Promise未必优先运行。 2. setImmediate未必比setTimeout早运行 3. 在最新浏览器中Promise会早于事件冒泡运行,在设计框架时应考虑这一情况 以下是实测情况 \---------------
JavaScript中Promise 使用、原理以及实现过程
#### 1.什么是 Promise promise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案。 #### 2.Promise 原理简析 (1)promise 本身相当于一个状态机,拥有三种状态 * pending * fulfilled * rejected 一个 promise 对象初始化时
Javascript 中的神器——Promise
_摘要:_ 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 Promise概念 --------- 所谓 Promise,就是ES6原生提供的一个
Promise 多重链式调用
`Promise`对象是用于异步操作的。 `Promise`的真正强大之处在于它的多重链式调用,可以避免层层嵌套回调。如果我们在第一次ajax请求后,还要用它返回的结果再次请求呢? 使用`Promise`,我们就可以利用`then`进行「链式回调」,将异步操作以同步操作的流程表示出来。 以下是个小Demo: /* e.g */ sen
Promise和Observable的映射
前言 -- 1. promise解决了嵌套地狱的问题,Observable解决了promise只有一个结果,和不可以取消的问题。 2. 使用的是rxjs6版本。 3. 这篇文章是方便使用Observable的API替换Promise的API。 ### 正常用法 promise .then(result => {}) .ca
Promise对象 3 种妙用
9012 年末,作为一个前端,说不了解 Promise 对象用法的基本不存在,这里就不对功能用法进行介绍了。但本文将会讲述你可能不知道的 Promise 3 种奇妙用法。当然,每种用法都会有其适用的特殊场景。 Promise 对象是可以缓存 --------------- ### 需求 对于一个对象而言,能够被缓存并不是一件难以理解的事情。缓存使用的意
Promise的奇怪用法和自己实现一个Promise
原文链接: [Promise的奇怪用法和自己实现一个Promise](https://my.oschina.net/ahaoboy/blog/4645165) 使用Promise实现一个页面所有图片加载完毕的回调 import React, { useEffect } from "react"; export default () =>
Promise进一步阅读
下面是几篇比较好的Promise文章: \[1\] Promise是怎么工作的, [http://wengeezhang.com/?p=13](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwengeezhang.com%2F%3Fp%3D13) \[2\] JavaScript进阶之路