异步编程方案----Promise实现小解

最新推荐文章于 2021-11-12 09:14:33 发布
最新推荐文章于 2021-11-12 09:14:33 发布
阅读量89 收藏
点赞数
原文链接：https://juejin.im/post/5aa8cb91f265da239376c4db
版权

Promise作为异步编程方案callback的进阶版，解决了callback回调地域问题的同时，还增加了一些特性：比如all，race方法是的promise在处理异步编程时更加的强大和灵活。

Promise特性

  1. 构造器需要一个参数executor（执行器）函数，executor同时需要resolve和reject两个函数作为参数，resolve是将promise转换为fulfilled（成功态）时调用的函数，reject是将promise转换为rejected（失败态）时调用的函数。
  2. Promise具有三种状态：pending（默认态），fulfilled，rejected，只能由pending--->fulfilled或者pending--->rejected。fulfilled和rejected之间不能转换
  3. promise的then函数具有两个参数onFullfilled和onRejected两个回调函数，这两个回调函数会在promise确定了状态之后进行对应的调用
  4. onFullfilled和onRejected两个回调函数会被添加进微任务队列（延时调用，不过优先级高于setTimeout宏任务）
  5. executor里面如果有setTimeout延时调用，则promise会暂时处于pending状态，此时执行then函数时需要onFullfilledCallbacks和onRejectedCallbacks两个回调队列用于分别缓存对应的回调函数
  6. then函数会返回一个新的promise作为下一步的链式调用

根据以上特性初步实现一个最初的promise，代码如下：

class Promise {
    constructor(executor) {
        this.status = 'pending' //默认状态
        this.value = undefined; //成功时保存resolve传过来的参数
        this.reason = undefined; //失败时保存reject传过来的原因
        this.onFullfilledCallbacks = [];//成功时回调队列
        this.onRejectedCallbacks = [];//失败时回调队列

        let resolve = (data) => {
            this.status = 'fullfilled';
            this.value = data;
            this.onFullfilledCallbacks.forEach(fn => fn());
        }

        let reject = (err) => {
            this.status = 'rejected';
            this.reason = err;
            this.onRejectedCallbacks.forEach(fn => fn());
        }

        try {
            executor(resolve, reject);
        } catch (err) {//执行器如果报错直接转为失败态，并且将失败原因传出
            reject(err);
        }
    }

    then(onFullfilled, onRejected) {
        let promise2;//返回新的promise

        if(this.status === 'fullfilled') {//如果成功了
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = onFullfilled(this.value);
                        resolve(x);
                    } catch (err) {//失败将错误传出
                        reject(err);
                    }
                }, 10);
            });
        }

        if(this.status === 'rejected') {//如果成功了
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason);
                        resolve(x);//即使失败了下一次then依然会走进成功的回调函数
                    } catch (err) {//失败将错误传出
                        reject(err);
                    }
                }, 10);
            });
        }

        if(this.status === 'pending') {//pending状态需要将对应的回调缓存起来
            promise2 = new Promise((resolve, reject) => {
                this.onFullfilledCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFullfilled(this.value);
                            resolve(x);
                        } catch (err) {//失败将错误传出
                            reject(err);
                        }
                    }, 10);
                });

                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            resolve(x);//即使失败了下一次then依然会走进成功的回调函数
                        } catch (err) {//失败将错误传出
                            reject(err);
                        }
                    }, 10);
                });
            });
        }

        return promise2;
    }
}
复制代码

then链式调用实现

按照promise A+ 规范，返回值x需要进行以下解析处理：

1. x 与 promise 相等

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

2. x 为 Promise

如果 x 为 Promise ，则使 promise 接受 x 的状态：

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

3. 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

4. 如果 x 不为对象或者函数

以 x 为参数执行 promise

resolvePromise代码实现
function resolvePromise(promise2, x, resolve, reject) {
    let called = false;

    if(promise2 === x) {// x 与 promise 相等
        return reject(new TypeError('循环引用了')); //抛出错误
    }

    if(x instanceof Promise) {
        if(x.status === 'pending') {//如果 x 处于等待态
            x.then(function(value) {
                resolvePromise(promise2, value, resolve, reject);// promise 需保持为等待态直至 x 被执行或拒绝
            }, reject);
        } else {//如果 x 处于执行态或者拒绝态
            x.then(resolve, reject);
        }

        return;
    }

    if(x !== null && (typeof x === 'object' || typeof x === 'function')) {//x 为对象或函数
        try {
            let then = x.then;

            if(typeof then === 'function') {//如果 then 是函数
                then.call(x, function(y) {//resolvePromise以值 y 为参数被调用
                    if(called) {//如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次
                        return; //则优先采用首次调用并忽略剩下的调用
                    }

                    called = true;
                    resolvePromise(promise2, y, resolve, reject);//运行 [[Resolve]](promise, y)
                }, function(r) {//如果 rejectPromise 
                    if(called) {//如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次
                        return; //则优先采用首次调用并忽略剩下的调用
                    }
    
                    called = true;
                    reject(r);//以 r 为原因拒绝 promise
                });
            } else {//如果 then 不是函数
                resolve(x);//以 x 为参数执行 promise
            }
        } catch (err) {//如果取 x.then 的值时抛出错误
            if(called) {//如果 resolvePromise 或 rejectPromise 已经被调用
                return; //忽略之
            }

            called = true;
            reject(err);//以 e 为原因拒绝 promise
        }
    } else {//如果 x 不为对象或者函数
        resolve(x);//以 x 为参数执行 promise
    }
}
复制代码

其他补充

1. Promise的then链式调用还有个特点，就是在中间then没有传入参数时可以依次传递数据，例如:

Promise.resolve('aaaa').then().then().then(function(data) {console.log(data)});

这个特性是因为onFullfilled和onRejected在没有被传入时会被赋予默认值，如下：

if(typeof onFullfilled !== 'function') {
    onFullfilled = value => value;
}

if(typeof onRejected !== 'function') {
    onRejected = err => {
        throw err;
    }
}
复制代码

2. Promise实例的catch方法类似不传onFullfilled参数的then方法，实现如下：

catch(callback) {
    return this.then(null, callback);
}
复制代码

3. Promise的静态all方法能够在传入的所以promise成功后返或数据，其中有一个失败则全部失败。

static all(promises) {
    let dataArr = [];
    let len = promises.length;
    let count = 0;//统计成功次数

    return new Promise(function(resolve, reject) {
        for (let i = 0;i < len;i++) {
            p.then(function(data) {
                dataArr[i] = data;
                
                if(++count === len) {//所有promise成功
                    resolve(dataArr);
                }
            }, reject);
        }
    });
}
复制代码

4. Promise的静态race方法使得传入的所以promise中最先成功的那个结果返回，有一个成功就成功

static race(promises) {
    let len = promises.length;

    return new Promise(function(resolve, reject) {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(resolve, reject);
        }
    });
}
复制代码

完整的Promise实现

class Promise {
    constructor(executor) {
        this.status = 'pending' //默认状态
        this.value = undefined; //成功时保存resolve传过来的参数
        this.reason = undefined; //失败时保存reject传过来的原因
        this.onFullfilledCallbacks = [];//成功时回调队列
        this.onRejectedCallbacks = [];//失败时回调队列

        let resolve = (data) => {
            this.status = 'fullfilled';
            this.value = data;
            this.onFullfilledCallbacks.forEach(fn => fn());
        }

        let reject = (err) => {
            this.status = 'rejected';
            this.reason = err;
            this.onRejectedCallbacks.forEach(fn => fn());
        }

        try {
            executor(resolve, reject);
        } catch (err) {//执行器如果报错直接转为失败态，并且将失败原因传出
            reject(err);
        }
    }

    then(onFullfilled, onRejected) {
        let promise2;//返回新的promise

        if(typeof onFullfilled !== 'function') {
            onFullfilled = value => value;
        }

        if(typeof onRejected !== 'function') {
            onRejected = err => {
                throw err;
            }
        }

        if(this.status === 'fullfilled') {//如果成功了
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = onFullfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (err) {//失败将错误传出
                        reject(err);
                    }
                }, 10);
            });
        }

        if(this.status === 'rejected') {//如果成功了
            promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.reason);
                        resolvePromise(promise2, x, resolve, reject);//即使失败了下一次then依然会走进成功的回调函数
                    } catch (err) {//失败将错误传出
                        reject(err);
                    }
                }, 10);
            });
        }

        if(this.status === 'pending') {//pending状态需要将对应的回调缓存起来
            promise2 = new Promise((resolve, reject) => {
                this.onFullfilledCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFullfilled(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (err) {//失败将错误传出
                            reject(err);
                        }
                    }, 10);
                });

                this.onRejectedCallbacks.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            resolvePromise(promise2, x, resolve, reject);//即使失败了下一次then依然会走进成功的回调函数
                        } catch (err) {//失败将错误传出
                            reject(err);
                        } 
                    }, 10);
                });
            });
        }

        return promise2;
    }

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

    static all(promises) {
        let dataArr = [];
        let len = promises.length;
        let count = 0;//统计成功次数

        return new Promise(function(resolve, reject) {
            for (let i = 0;i < len;i++) {
                p.then(function(data) {
                    dataArr[i] = data;
                    
                    if(++count === len) {//所有promise成功
                        resolve(dataArr);
                    }
                }, reject);
            }
        });
    }

    static race(promises) {
        let len = promises.length;

        return new Promise(function(resolve, reject) {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(resolve, reject);
            }
        });
    }

    static deferred() {
        let dfd = {};

        dfd.promise = new Promise(function (resolve, reject) {
            dfd.resolve = resolve;
            dfd.reject = reject;
        });

        return dfd;
    }
}

function resolvePromise(promise2, x, resolve, reject) {
    let called = false;

    if(promise2 === x) {// x 与 promise 相等
        return reject(new TypeError('循环引用了')); //抛出错误
    }

    if(x instanceof Promise) {
        if(x.status === 'pending') {//如果 x 处于等待态
            x.then(function(value) {
                resolvePromise(promise2, value, resolve, reject);// promise 需保持为等待态直至 x 被执行或拒绝
            }, reject);
        } else {//如果 x 处于执行态或者拒绝态
            x.then(resolve, reject);
        }

        return;
    }

    if(x !== null && (typeof x === 'object' || typeof x === 'function')) {//x 为对象或函数
        try {
            let then = x.then;

            if(typeof then === 'function') {//如果 then 是函数
                then.call(x, function(y) {//resolvePromise以值 y 为参数被调用
                    if(called) {//如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次
                        return; //则优先采用首次调用并忽略剩下的调用
                    }

                    called = true;
                    resolvePromise(promise2, y, resolve, reject);//运行 [[Resolve]](promise, y)
                }, function(r) {//如果 rejectPromise 
                    if(called) {//如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次
                        return; //则优先采用首次调用并忽略剩下的调用
                    }
    
                    called = true;
                    reject(r);//以 r 为原因拒绝 promise
                });
            } else {//如果 then 不是函数
                resolve(x);//以 x 为参数执行 promise
            }
        } catch (err) {//如果取 x.then 的值时抛出错误
            if(called) {//如果 resolvePromise 或 rejectPromise 已经被调用
                return; //忽略之
            }

            called = true;
            reject(err);//以 e 为原因拒绝 promise
        }
    } else {//如果 x 不为对象或者函数
        resolve(x);//以 x 为参数执行 promise
    }
}
复制代码
weixin_34247032
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
异步编程的解决方案之Promise
Carol的小星球
11-28 229
Promise是一种异步解决方案，是对传统回调函数方法的一种改进。 作用 （1）解决回调地狱，使函数顺序执行 （2）使用then继续返回一个promise对象可以实现链式调用 三种状态 pending(进行中) resolved(成功) rejected(失败) 创建Promise实例 Promise对象是一个构造函数，接受一个函数作为参数，这个函数的两个参数分别是resolve和reject，分...
深入理解JS异步编程-Promise
10-16
Promise 是 ES6 新增的一个异步解决方案，它同 await 一样，是异步的解决方案，但是相比于 await，Promise 可以同时统一处理多个异步操作。这一点是很方便的。下面我们来一起学习一下吧
Promises/A+规范
weixin_33774615的博客
12-13 67
为什么80%的码农都做不了架构师？>>> ...
Promise笔记整理
MichelleZhai的博客
07-21 574
这篇文章主要是为了整理《你不知道的js》中的部分笔记，可是没想到promise要讲的东西太多了，所以单独写了一篇文章来介绍它，后期也会持续更新 第三章 Promise Promise 第三章 Promise Promise 雏形分析 先看一个Promise的雏形 function Promise(fn) { var va...
Promise初步详解（resolve，reject，catch）
热门推荐
_夜渐凉
09-28 8万+
一，何为Promise？ 为了直观一点，首先我们采用console.dir(Promise)看一下它的结构组成。 从上面的图片中我们可以到，Promise其实是一个构造函数，它有resolve，reject，race等静态方法;它的原型（prototype）上有then，catch方法，因此只要作为Promise的实例，都可以共享并调用Promise.prototype上面的方法(then...
【知其所以然】详解 Promise A Plus ，从规范角度看 Promise
m0_48721669的博客
11-12 727
感觉有帮助的小伙伴请点赞????鼓励一下 ~ 前言 Promise 的规范有很多，如Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6 中采用了 Promise/A+ 规范。 所以我们今天就讲一讲 Promise/A+ 规范。 任何符合 Promise 规范的对象或函数都可以成为 Promise， 我们使用的 Promise 也不过是符合 Promise/A+ 规范的其中一种形式，你也可以自己封装一个符合规范的函数，那么你写的函数也
Promise源码的个人理解
yanchuidong的博客
03-06 90
所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件的结果 Promise对象特点:对象的状态不受外界影响 一旦状态改变,就不会再变,任何时候都是这个结果 pending(进行中)—>fulfilled(已成功) pending(进行中)—>rejected(已失败) 三种状态 1.pending(进行中) 2.fulfilled(已成功) 3.rejected(...
es6-promise@4.1.1.zip
06-18
为了解决这个问题，Promise（承诺）应运而生，它是ES6引入的一种异步编程的解决方案，极大地改善了JavaScript中处理异步操作的方式。 **Promise的基本概念** Promise对象代表一个异步操作的最终完成或失败，并且...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
es-promise
10-10
`es-promise` 是一个轻量级的 Promise 实现，兼容性好，适合在各种环境中使用。 解决请求内循环嵌套问题，Promise 的主要优势在于链式调用。例如，我们有多个网络请求需要依次执行，传统方式可能会写成这样： ```...
Promise的resolve方法和reject方法
LQ55
07-29 5万+
Promise的resolve方法和reject方法 Promise.resolve方法返回一个promise的实例 Promise.resolve('foo');//等价于如下 new Promise((resolve)=&gt;{ resolve('foo'); }) 根据参数不同，分为一下几种情况 （1）参数是一个Promise的实例 如果参数是一个Promise的实例...
面试高频点-Promise解析和实现
weixin_33860737的博客
12-12 320
Promise因为它的调用方式使得异步操作清晰简单，是现在异步操作的主要方式。Promise的使用和实现是面试中的高频问点。这篇文章主要解析Promise规范和一版实现方式。 PromiseA+规范 了解Promise首先我们要清楚Promise规范的内容，规范规定了Promise的行为和调用方式。这里是规范原文。下面是翻译总结： 一个Promise主要代表了一个异步操作的最终结果。与Promis...
Promise
sl798970799的博客
09-19 106
1、发自灵魂的提问 ： 什么是promise ? enenen… a. Promise是JS异步编程中的重要概念和思想，在这个容器里面保存着某个未来才会结束的事件(通常返回一个事件结果); Promise之前是通过回调函数来实现的但是嵌套逻辑太深 例： const fs = require('fs'); fs.readFile('1.txt', (err,data) => { fs.readFile('2.txt', (err,data) => { fs.readFile
Promise机制
xiangzhihong8的专栏
06-25 3133
Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。回调金字塔那么何为回调金字塔呢？简单的讲就是回调里面嵌套回调。例如：asyncOpe
Promise详解二（解读Promise规范 + 一些小测试）
岂曰无衣
12-18 747
任何符合promise规范的对象和函数都可以成为Promise。 以下内容参考自promise A plus 规范，地址：https://promisesaplus.com/ 基本术语 Promise：是一个具有then方法的对象或函数，其行为符合Promises/A+规范。 thenadble：是一个定义了then方法的对象或函数。 value：指任何JavaScript的合法值（包括undefined，thenable，和promise）。 exception：使用throw抛出的一个值。 reaso
大白话讲解Promise（二）理解Promise规范
aigenglong0649的博客
03-25 562
上一篇我们讲解了ES6中Promise的用法，但是知道了用法还远远不够，作为一名专业的前端工程师，还必须通晓原理。所以，为了补全我们关于Promise的知识树，有必要理解Promise/A+规范，理解了它你才能知道Promise内部是怎么回事，我们ES6中的Promise是如何一路走来的。 网上关于Promise/A+的翻译文档很多，所以我就不翻译一次了，本篇的目的在于为文档增加...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值