关于Promise基本方法的简单实现

目录
  • 前言
  • catch() 方法
  • done() 方法
  • finally() 方法
  • Promise.all() 方法
  • Promise.race() 方法
  • Promise.resolve() 和 Promise.reject()
  • 附Promise 解决过程
  • 总结

前言

Promise 是前端面试和工作中极其常见的一个概念,关于它各种方法的手写实现也很有市场,今天在这里总结一下 Promise 基本方法的简单实现。

catch() 方法

catch 方法是对 then 方法的封装,只用于接收 reject(reason) 中的错误信息。

因为在 then 方法中 onRejected 参数是可不传的,不传的情况下,错误信息会依次往后传递,直到有 onRejected 函数接收为止,因此在写 promise 链式调用的时候, then 方法不传 onRejected 函数,只需要在最末尾加一个 catch() 就可以了,这样在该链条中的 promise 发生的错误都会被最后的 catch 捕获到。

catch(onRejected) {
	return this.then(null, onRejected);
}

done() 方法

catch 在 promise 链式调用的末尾调用,用于捕获链条中的错误信息,但是 catch 方法内部也可能出现错误,所以有些 promise 实现中增加了一个方法 done 。

done 相当于提供了一个不会出错的 catch 方法,并且不再返回一个 promise ,一般用来结束一个 promise 链。

done() {
    this.catch(reason => {
        console.log('done', reason);
        throw reason;
    });
}

finally() 方法

finally 方法用于无论是 resolve 还是 reject , finall y的参数函数都会被执行。

finally(fn) {
    return this.then(value => {
        fn();
        return value;
    }, reason => {
        fn();
        throw reason;
    });
};

Promise.all() 方法

Promise.all 方法接收一个 promise 数组,返回一个新 promise2 ,并发执行数组中的全部 promise ,所有 promise 状态都为 resolved 时, promise2 状态为 resolved 并返回全部 promise 结果,结果顺序和 promise 数组顺序一致。如果有一个 promise 为 rejected 状态,则整个 promise2 进入 rejected 状态。

static all(promiseList) {
    return new Promise((resolve, reject) => {
        const result = [];
        let i = 0;
        for (const p of promiseList) {
            p.then(value => {
                result[i] = value;
                if (result.length === promiseList.length) {
                    resolve(result);
                }
            }, reject);
            i++;
        }
    });
}

Promise.race() 方法

Promise.race 方法接收一个 promise 数组, 返回一个新 promise2 ,顺序执行数组中的 promise ,有一个 promise 状态确定, promise2 状态即确定,并且同这个 promise 的状态一致。

static race(promiseList) {
    return new Promise((resolve, reject) => {
        for (const p of promiseList) {
            p.then((value) => {
                resolve(value);
            }, reject);
        }
    });
}

Promise.resolve() 和 Promise.reject()

Promise.resolve 用来生成一个 rejected 完成态的 promise , Promise.reject 用来生成一个 rejected 失败态的 promise 。

static resolve(value) {
    let promise;

    promise = new Promise((resolve, reject) => {
        this.resolvePromise(promise, value, resolve, reject);
    });

    return promise;
}

static reject(reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

附Promise 解决过程

Promise 解决过程是一个抽象的操作,其需输入一个 promise 和一个值,我们表示为 [[Resolve]](promise, x),如果 x 有 then 方法且看上去像一个 Promise ,解决程序即尝试使 promise 接受 x 的状态;否则其用 x 的值来执行 promise 。

这种 thenable 的特性使得 Promise 的实现更具有通用性:只要其暴露出一个遵循 Promise/A+ 协议的 then 方法即可;这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存。

运行 [[Resolve]](promise, x) 需遵循以下步骤:

  • x 与 promise 相等

如果 promise 和 x 指向同一对象,以 TypeError 为据因拒绝执行 promise

  • x 为 Promise

如果 x 为 Promise ,则使 promise 接受 x 的状态:

- 如果 x 处于等待态, promise 需保持为等待态直至 x 被执行或拒绝
- 如果 x 处于执行态,用相同的值执行 promise
- 如果 x 处于拒绝态,用相同的据因拒绝 promise

  • x 为对象或函数

如果 x 为对象或者函数:

- 把 x.then 赋值给 then
- 如果取 x.then 的值时抛出错误 e ,则以 e 为据因拒绝 promise
- 如果 then 是函数,将 x 作为函数的作用域 this 调用之。传递两个回调函数作为参数,第一个参数叫做 resolvePromise ,第二个参数叫做 rejectPromise:
    - 如果 resolvePromise 以值 y 为参数被调用,则运行 [[Resolve]](promise, y)
    - 如果 rejectPromise 以据因 r 为参数被调用,则以据因 r 拒绝 promise
    - 如果 resolvePromise 和 rejectPromise 均被调用,或者被同一参数调用了多次,则优先采用首次调用并忽略剩下的调用
    - 如果调用 then 方法抛出了异常 e:
        - 如果 resolvePromise 或 rejectPromise 已经被调用,则忽略之
        - 否则以 e 为据因拒绝 promise
    - 如果 then 不是函数,以 x 为参数执行 promise
- 如果 x 不为对象或者函数,以 x 为参数执行 promise

如果一个 promise 被一个循环的 thenable 链中的对象解决,而 [[Resolve]](promise, thenable) 的递归性质又使得其被再次调用,根据上述的算法将会陷入无限递归之中。算法虽不强制要求,但也鼓励施者检测这样的递归是否存在,若检测到存在则以一个可识别的 TypeError 为据因来拒绝 promise。

总结

常用的方法基本就这些, Promise 还有很多扩展方法,这里就不一一展示,基本上都是对 then 方法的进一步封装,只要你的 then 方法没有问题,其他方法就都可以依赖 then 方法实现。

到此这篇关于Promise基本方法简单实现的文章就介绍到这了,更多相关Promise基本方法实现内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 理解JavaScript中Promise的使用

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验.于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题.本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解. 什么是 Promise 一个 Promise 对象代表一个目前还不可用,但是在未来的

  • 举例详解JavaScript中Promise的使用

    摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了. "Promises" 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事.它的核心就是一个promise代表一个任务结果,这个任务有可能完成有可能没完成.Promise模式唯一需要的一个接口是调用then方法,它可以用来注册当promise完成或者失败时调用的回调函数,这在Common

  • JavaScript Promise 用法

    同步编程通常来说易于调试和维护,然而,异步编程通常能获得更好的性能和更大的灵活性.异步的最大特点是无需等待."Promises"渐渐成为JavaScript里最重要的一部分,大量的新API都开始promise原理实现.下面让我们看一下什么是promise,以及它的API和用法! Promises现状 XMLHttpRequest API是异步的,但它没有使用promise API.但有很多原生的 javascript API 使用了promise: *Battery API *fetc

  • JS中Promise函数then的奥秘探究

    Promise概述 Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口. 那么,什么是Promises? 首先,它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套. 简单说,它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这

  • Javascript Promise用法详解

    1.约定 本文的 demo 代码有些是伪代码,不可以直接执行. 没有特殊说明,本文所有 demo 都是基于 ES6 规范. Object.method 代表是静态方法, Object#method 代表的是实例方法.如 Promise#then 代表的是 Promise 的实例方法, Promise.resolve 代表的是 Promise 的静态方法. 2.什么是 Promise? 首先我们来了解 Promise 到底是怎么一回事 Promise 是抽象的异步处理对象,以及对其进行各种操作的组

  • 浅谈js promise看这篇足够了

    一.背景 大家都知道nodejs很快,为什么会这么快呢,原因就是node采用异步回调的方式来处理需要等待的事件,使得代码会继续往下执行不用在某个地方等待着.但是也有一个不好的地方,当我们有很多回调的时候,比如这个回调执行完需要去执行下个回调,然后接着再执行下个回调,这样就会造成层层嵌套,代码不清晰,很容易进入"回调监狱",就容易造成下边的例子: async(1, function(value){ async(value, function(value){ async(value, fu

  • JavaScript中的Promise使用详解

    许多的语言,为了将异步模式处理得更像平常的顺序,都包含一种有趣的方案库,它们被称之为promises,deferreds,或者futures.JavaScript的promises ,可以促进关注点分离,以代替紧密耦合的接口. 本文讲的是基于Promises/A 标准的JavaScript promises.[http://wiki.commonjs.org/wiki/Promises/A] Promise的用例: 执行规则 多个远程验证 超时处理 远程数据请求 动画 将事件逻辑从应用逻辑中解耦

  • 关于Promise基本方法的简单实现

    目录 前言 catch() 方法 done() 方法 finally() 方法 Promise.all() 方法 Promise.race() 方法 Promise.resolve() 和 Promise.reject() 附Promise 解决过程 总结 前言 Promise 是前端面试和工作中极其常见的一个概念,关于它各种方法的手写实现也很有市场,今天在这里总结一下 Promise 基本方法的简单实现. catch() 方法 catch 方法是对 then 方法的封装,只用于接收 rejec

  • mysql 5.7.20常用下载、安装和配置方法及简单操作技巧(解压版免安装)

    话说凌晨刚折腾完一台MySQL 5.7.19版本的安装,未曾料到早上MySQL官方就发布了最新的5.7.20版本.这个版本看似更新不多,但是加入了一个我们所急需的功能. MySQL 5.7.20版本新增了参数group-replication-member-weight,用来表示选主时服务器的优先级.若没有这个优先级,则之前版本的MGR会选择一个或许不是用户想要的节点,这是一个令人头疼的问题.相信5.7.20版本新增的该参数能解决一些用户的痛点. 1. 下载: mysql-5.7.20是解压版免

  • IOS中UIImageView方法实现简单动画

    IOS中UIImageView方法实现简单动画 查阅UIImageView文档时,发现UIImageView有一组关于动画的方法/参数,可以实现简单的动画.包括: animationImages; highlightedAnimationImages; animationDuration; animationRepeatCount; - startAnimating; - stopAnimating; - isAnimating; 上面的这组方法很简单,一目了然:设置好动画的图片.动画时间.重复

  • Thrift的安装方法和简单实例

    本文只是简单的讲解Thrift开源框架的安装和简单使用示例,对于详细的讲解,后面在进行阐述. Thrift简述   Thrift是一款由Fackbook开发的可伸缩.跨语言的服务开发框架,该框架已经开源并且加入的Apache项目.Thrift主要功能是:通过自定义的Interface Definition Language(IDL),可以创建基于RPC的客户端和服务端的服务代码.服务代码的生成是通过Thrift内置的代码生成器来实现的.Thrift 的跨语言性体现在,它可以生成C++, Java

  • java反射_改变private中的变量及方法的简单实例

    java反射_改变private中的变量及方法的简单实例 class DemoTest{ private String name="123"; public getName(){ system.out.println("public getName " + name); return name; } private getName2(){ system.out.println("private getName2 " + name); return

  • java中利用反射调用另一类的private方法的简单实例

    我们知道,Java应用程序不能访问持久化类的private方法,但Hibernate没有这个限制,它能够访问各种级别的方法,如private, default, protected, public. Hibernate是如何实现该功能的呢?答案是利用JAVA的反射机制,如下: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public class ReflectDemo {

  • 打字效果动画的4种实现方法(超简单)

    方法一(纯css实现): html代码: <h1 class="typing typing-item">打字动画打字动画打字动画</h1> css样式: .typing{ font-size: 1rem; padding-top: 6%; margin-bottom: 5%; font-weight: normal; letter-spacing: .3rem; -webkit-animation: type 2s steps(50, end) forwards

  • 浅谈python字符串方法的简单使用

    学习python字符串方法的使用,对书中列举的每种方法都做一个试用,将结果记录,方便以后查询. (1) s.capitalize() ;功能:返回字符串的的副本,并将首字母大写.使用如下: >>> s = 'wwwwww' >>> scap = s.capitalize() >>> scap 'Wwwwww' (2)s.center(width,char); 功能:返回将s字符串放在中间的一个长度为width的字符串,默认其他部分用空格填充,否则使用c

  • js获取html的span标签的值方法(超简单)

    HTML中代码为: <span id="testid">aaaa</span> 获取的js代码: 方法一:.innerText var x1 = document.getElementById("testid").innerText; alert("x1="+x1); 方法二:.innerHTML var x2 = document.getElementById("testid").innerHTML;

  • 使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)

    在网站开发中,经常会简单使用js代码来判断字符串中有多少汉字的功能.今天小编抽时间给大家分享实现代码.废话不多说了,直接给大家贴代码了. $("form").submit(function () { var content = editor.getContentTxt(); var sum = 0; re = /[\u4E00-\u9FA5]/g; //测试中文字符的正则 if (content) { if (re.test(content)) //使用正则判断是否存在中文 { if

随机推荐