Promise从入门到拿Offer之手写Promise

Chase620 等级 531 0 0

1、Promise构造函数的实现

Promise构造函数用来声明示例对象,需要传入一个执行器函数。其中包括resolve函数和reject函数,以及几个重要的属性:状态属性、结果属性和回调函数队列。

Promise从入门到拿Offer之手写Promise

构造函数的基本框架

resolve函数用于异步处理成功后调用的函数。其中包括验证对象状态修改次数,修改promise实例对象状态,异步调用成功的回调函数onResolved。

Promise从入门到拿Offer之手写Promise

resolve函数

reject函数用于异步处理失败后调用的函数。其中包括验证对象状态修改次数,修改promise实例对象状态,异步调用成功的回调函数onRejected。

Promise从入门到拿Offer之手写Promise

reject函数

2、Promise的then函数和catch函数实现

then函数用于为promise指定成功/失败的回调函数,返回值是一个新的promise对象。

Promise从入门到拿Offer之手写Promise

then函数的基本框架

如果 onResolved/onRejected 不是函数, 可它指定一个默认的函数。若onResolved不是函数,则指定返回的 promise 为一个成功状态, 结果值为 value;若onRejected不是函数,指定返回的 promise 为一个失败状态, 结果值为 reason。否则返回一个新的promise对象。

Promise从入门到拿Offer之手写Promise

否则返回一个新的promise对象。

Promise从入门到拿Offer之手写Promise

用于处理promise成功/失败结果的函数。

Promise从入门到拿Offer之手写Promise

Promise从入门到拿Offer之手写Promise

catch函数用于指定失败的回调函数,是then(null, onRejected)的语法糖。

Promise从入门到拿Offer之手写Promise

catch函数

3、Promise的resolve函数和reject函数实现

Promise从入门到拿Offer之手写Promise

resolve函数

Promise从入门到拿Offer之手写Promise

reject函数

4、Promise的all函数和race函数实现

Promise从入门到拿Offer之手写Promise

all函数

Promise从入门到拿Offer之手写Promise

race函数

本文转自 https://www.jianshu.com/p/c202658b8d59,如有侵权,请联系删除。

收藏
评论区

相关推荐

一、手写源码之 Promise
版本一,构造函数 javascript function MyPromise(fn () {}) { // const this {} this.state 'pending' this.value undefined const resolve (value) { if (this.state
快速掌握es6+新特性及es6核心语法盘点
首先先祝各位国庆快乐,好好去体验生活的快乐,也祝祖国生日快乐,越变越强大,越来越繁荣。 接下来我会总结一些工作中常用也比较核心的es6的语法知识,后面又要慢慢开始
浅谈promise和js执行机制(一)
作为一个入门级前端,今天是一个非常值得纪念的日子,因为这是我第一次在论坛上发表帖子,作为起步。虽然我觉得自己水平还是十分的有限,对一些细节的理解还不是很透彻,但是还是要迈出这一步,不管是给别的新手作为学习参考,还是自己以后回顾,总觉得需要把自己的成长记录下来,希望自己以后还是要多坚持,如果有不对的地方还是希望大家及时提出来,共同进步 今天有时间翻到了
浅谈promise和js执行机制(二)
让我们继续上一次遗留的问题: setTimeout(function(){ console.log('1') }); new Promise(function(resolve){ console.log('2'); resolve(); }).then(function(){ console.log('3') }); conso
Promise从入门到拿Offer之手写Promise
1、Promise构造函数的实现Promise构造函数用来声明示例对象,需要传入一个执行器函数。其中包括resolve函数和reject函数,以及几个重要的属性:状态属性、结果属性和回调函数队列。构造函数的基本框架 resolve函数用于异步处理成功后调用的函数。其中包括验证对象状态修改次数,修改promise实例对象状态,异步调用成功的回调函数
js异步的5种样式
js异步的5种样式 1.定时器 2.AJAX 3.Promise 4.Generator 5.asyns和awite  1.定时器     setTimeout() : 延时器        可以传入三个分别是            1)code:必
用 async/await 来处理异步
一级标题昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了。先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
你不可不知的JS面试题(第二期)
1、什么是继承?子类可以使用父类的所有功能,并且对功能进行扩展。 新增方法 改用方法 (1)、ES6使用extends子类继承父类的方法。 // 父类     class A         constructor(name)             this.name name;                  getNa
你要的几个JS实用工具函数(持续更新)
今天,我们来总结下我们平常使用的工具函数,希望对大家有用。1、封装fetch「源码:」/   封装fetch函数,用Promise做回调   @type get: (function()), post: (function(, ))  / const fetchUtil       get: (url)           return new 
前端面试之常见手写代码
为什么要写这类文章作为一个程序员,代码能力毋庸置疑是非常非常重要的,就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要,那我们就必须掌握它,所以文章标题用了死磕,一点也不过分,也希望不被认为是标题党。作为一个普通前端,我是真的写不出 Promise A+ 规范,但是没关系,我们可以站在巨人的肩膀上,要相信我们现在要走
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
Vue 重复进入相同路由警报
路由守卫重复进入两次,报错(虽然页面还可以运行) 原因:vuerouter路由版本更新产生的问题,导致路由跳转失败抛出该错误,但并不影响程序功能 Uncaught (in promise) Error: Redirected when going from "/productDetail?VNK326acc75" to "/productTerms" via
nextTick原理解析
nextTick 是什么\$nextTick:根据官方文档的解释,它可以在 DOM 更新完毕之后执行一个回调函数,并返回一个 Promise(如果支持的话)js// 修改数据vm.msg "Hello";// DOM 还没有更新Vue.nextTick(function() // DOM 更新了);这块理解 EventLoop 的应该一看就懂,其实就是
盘点JavaScript中async/await知识
大家好,我是进阶学习者。一、前言Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。 二、Async function让以 async 这个关键字开始。它可以被放置在一个函数前面。如下所示:async function f() return 1;在函数前面的 “async” 这个单词表达了一个简单的