Promise串行的六种方法

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量2.5k 收藏 8
点赞数
分类专栏： 面经 开发中的实用方法和函数 javascript 文章标签： javascript Promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45803050/article/details/123165188
版权

Promise串行的六种方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
             题1:
             let arr = [ 
                new Promise(res=>{
                    setTimeout(()=>{
                        res(1)
                    },1000)
            ​
                }),
                new Promise(res=>{
                    setTimeout(()=>{
                        res(2)
                    },1000)
            ​
                }), 
                new Promise(res=>{
                    setTimeout(()=>{
                        res(3)
                    },1000)
            ​
                })]
            ​
            function iteratorPromise(arr){
                //补充代码
            }
            ​
            iteratorPromise(arr);
            复制代码
            先定义一个Promise的数组，串行执行它们，最后实现如下的输出


            思路：那么要怎么实现串行显示呢？其实只要将它们用.then链接起来就好了，就是一个上一个Promise.then里面返回下一个Promise；

        */

        function iteratorPromise(arr) {
            for (let i = 0; i < arr.length; i++) {
                arr[i].then(num => {
                    console.log(num);
                    return arr[i + 1];
                })
            }
        }

        // iteratorPromise(arr);

    </script>

    <script>
        // 题2:
        /**
            let arr = [()=>{
            return new Promise(res=>{
                setTimeout(()=>{
                console.log("run", Date.now());
                res()
                },1000)
            })
            },()=>{
            return new Promise(res=>{
                setTimeout(()=>{
                console.log("run", Date.now());
                res()
                },1000)
                
            })
            },()=>{
            return new Promise(res=>{
                setTimeout(()=>{
                console.log("run", Date.now());
                res()
                },1000)
                
            })
            }]
        ​
        */

        //    方法2: 使用promise后接 then 来实现串行

        function iteratorPromise1(arr) {
            let res = Promise.resolve();
            arr.forEach(element => {
                res = res.then(() => element());
            });
        }


        // //    方法3: 使用 await 来实现串行
        function iteratorPromise2(arr) {
            arr.forEach(async element => await element());
        }
        // iteratorPromise2(arr1);

    </script>

    <script>
        /**
            题三：
            const arr = [
                Promise.resolve('1'),
                new Promise(function (resolve, reject) {
                    setTimeout(resolve, 2000, '2')
                }),
                Promise.resolve('3'),
                new Promise(function (resolve, reject) {
                setTimeout(resolve, 3000, '4')
                }),
                Promise.resolve('5'),
            ]
        */

        const arr = [
            Promise.resolve('1'),
            new Promise(function (resolve, reject) {
                setTimeout(resolve, 2000, '2')
            }),
            Promise.resolve('3'),
            new Promise(function (resolve, reject) {
                setTimeout(resolve, 3000, '4')
            }),
            Promise.resolve('5')
        ]

        function iteratorPromise3(arr) {
            arr.forEach(async ele => await ele);
        }

        iteratorPromise3(arr3);


    </script>


    <script>
        // 看这一篇，方法汇总
        /**
             使用Array.prototype.reduce、使用async + 循环 + await、 
             或者使用新出的for await of
        */

        // 方法1 reduce
        arr.reduce((prev, curr) => {
            return prev.then(() => delay(curr));
        }, Promise.resolve())


        // 方法2 async + 循环 + await
        async function test() {
            for (let val of arr) {
                await delay(val);
            }
        }
        test();


        // 方法3:方法1的变种
        let p = Promise.resolve();
        for (let val of arr) {
            p = p.then(() => delay(v));
        }

        // 方法4:递归
        function dispatch(i, p = Promise.resolve()) {
            if (!arr[i]) return Promise.resolve();

            return p.then(() => dispatch(i + 1, delay(arr[i])));
        }


        // 方法5: for await of
        /**
            通过查阅了for await of的规则，其实for await of和for of规则类似，
            只需要实现一个内部[Symbol.asyncIterator]方法即可
        */
        function createAsyncIterable(arr) {
            return {
                [Symbol.asyncIterator]() {
                    return {
                        i: 0,
                        next() {
                            if (this.i < arr.length) {
                                return delay(arr[this.i]).then(() => ({ value: this.i++, done: false }));
                            }

                            return Promise.resolve({ done: true });
                        }
                    };
                }
            }
        }

        (async function () {
            for await (i of createAsyncIterable(arr)) { }
        })();



        // 方式6. generator
        function* gen() {
            for (const v of arr) {
                yield delay(v)
            }
        }

        function run(gen) {
            const g = gen()

            function next(data) {
                const result = g.next(data)
                if (result.done) return result.value
                result.value.then(function (data) {
                    next(data)
                })
            }

            next()
        }

        run(gen)



    </script>
</body>

</html>

可参考
https://juejin.cn/post/6844903801296519182

ALKEN ABBY
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise处理异步的并行和串行
郊眠寺
01-10 979
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Promise推出串行ATA RAID 5解决方案
03-04
Promise（乔鼎）日前宣布为Serial ATA150硬盘推出「FastTrak S150 SX4」RAID 5 PCI Serial ATA(SATA)数组卡。FastTraK S150 SX4 PCI卡提供前所未有的最佳价格／效能比，一举打破RAID 5之前价格昂贵的藩篱，为使用者提供专业级的RAID 5技术效能。 RAID 5技术结合效能提升、数据保护及大容量等优点，是储存专家公认的最佳选择，但是RAID 5硬件的高价却是其在广泛市场应用上的一大限制。
探究一道价值25k的蚂蚁金服异步串行面试题
10-14
主要介绍了探究一道价值25k的蚂蚁金服异步串行面试题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript Promise简单学习使用方法小结
01-19
解决回调函数嵌套太深，并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果，跟Promise交互的主要方式是通过他的then()方法来注册回调函数，去接收Promise的最终结果值 Promise相关的协议有PromiseA和PromiseA+ 定义一个类Promise 定义属性队列queue，初始化空数组[] 定义属性值value，初始化null 定义属性状态status，初始化“pending”（默认值） 定义成员方法getQueue()，返回属性queue 定义成员方法getStatus()，返回属性status 定义成员方法setStatus()，设置状态，传递参数：st
Promise 串行执行
qq_43515448的博客
04-14 574
Promise 串行执行 ❗注意点： 直接写在Promise中的代码会直接同步执行。 例如： const p = new Promise((resolve,reject)=>{ console.log('hello world!'); }); //hello world! 但声明一个变量，再将一个返回值为new的promise对象的函数赋值给这个变量，promise中的内容就不会运行。 then方法中的第一个参数为resolve的回调函数，其返回值为一个新的promise实例。 pro
Promise 串行实现
csdn_wwp的博客
02-07 534
Promise 串行实现。
Promise的串行和并行
YZRHANYU的博客
10-17 1762
Promise使用以及 Promise的串行和并行
Promise的串行调用并行调用理解
背影
10-12 255
1）什么是Promise串行Promise串行是指每一个由promise封装的任务都顺序执行，即上一个执行完成后再执行下一个。可是它真的会依次输出123吗？？？？？不会，它会依次输出321卧槽，这是为啥，我满脸的❓❓为啥，为啥？这是因为，promise.then里面的才是微任务，所以当你执行执行上面for循环时，他会先把3个setTimeout放进宏任务队列，即使你没有return arr[i+1],它也会输出3，2，1，还是不明白吗，看下面这个代码就明白了。
【Promise高级用法】实现并行和串行API
qq_48896417的博客
05-29 1120
Promise高级用法 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录Promise高级用法串行API一、思路总结二、实现1.代码实现并行API一、思路总结二、实现1.代码实现总结 串行API 提示：这里可以添加本文要记录的大概内容： 1、案例:实现一个promise队列----传入一个promise数组，一次串行执行并输出他们的成功或者失败结果 提示：以下是本篇文章正文内容，下面案例可供参考 一、思路总结 promise串行的实现基本思路是： 1、第一种是在前一个prom
Promise实现串行执行
大赚万万亿
08-16 110
【代码】Promise实现串行执行。
js代码-promise 串行
07-16
js代码-promise 串行
promise:Promise-在Java中以同步的方式异步编程
04-27
Promise A+是commonJs规范提出的一种异步编程解决方案，比传统的解决方案—回调函数和事件—更合理和更强大。promise实现了Promise A+规范，包装了java中对多线程的操作，提供统一的接口，使得控制异步操作更加容易...
Promise、async、await用法——前端异步串行执行，循环串行执行
a5552157的博客
05-30 2522
前言 本文只是个人因需求在开发后的总结，更偏向于应用方面，对于promise、async的基础就不赘述了。相关文章网络上也很多，有需要的朋友也可以参考一下，建议有一点点相关知识后再阅读更容易理解。 1.先热下身—promise的基础用法—异步函数串行执行 其实就算不使用promise，通过在异步函数里嵌套下一个要执行的异步函数也可以达到同样的效果。但使用promise代码更灵活，代码可读性也好些。...
Promise串行执行
麻瓜哇哇哇的博客
06-29 3126
简介 前几天去面试，面试官问我Promise串行的实现，当时大脑太紧绷了，没有思路，但是一出来，坐上地铁没回答出来的问题，都想起来了，唉，真的好气呀，要是心里素质好点该多好，接下来，我就分享下我的实现思路，大家可以参考下，当然有好的思路，还请多多赐教。 promise数组如下 const promise1 = new Promise((resolve, reject) => {...
ES6之Promise
seasidexin的专栏
05-21 189
在浏览器里试了个例子 const p = new Promise(function(resolve,reject){ resolve('success');//这个必须有，否则会卡住，不执行then console.log(1); }); console.log(2); p.then(function(value){ console.log(4); }); console...
JavaScript面试题：代码自定义实现promise的串行执行和并行执行
lalala_dxf的博客
02-06 340
自定义promise串行/并行执行
ES6——Promise的串联
xun__xing的博客
08-10 726
Promise的串联一、Promise的串联二、问题优化 一、Promise的串联 当后续的Promise需要用到之前的Promise的处理结果时，需要Promise的串联 Promise对象中，无论是then方法还是catch方法，它们都具有返回值，返回的是一个全新的Promise对象，它的状态满足下面的规则： 如果当前的Promise是未决的，得到的新的Promise是挂起状态 如果当前的Promise是已决的，会运行响应的后续处理函数，并将后续处理函数的结果（返回值）作为resolved状态数据，
如何控制Promise的串行执行？
Always-Learning
09-24 761
Promise是如何执行的？ 让我们来一起看看这个例子，下面的这个例子是一个数组，数组中的每一个元素都是一个函数，函数会返回一个Promise对象，但是每个Promise对象都被定时器控制着执行时间，熟系JS事件循环机制的同学都知道，Promise属于微任务，在执行的时候会加入到微任务队列中，所以执行顺序是2 -> 1 -> 3 const funcArr = [ () => new Promise((resolve) => { s
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
promise实现串行
08-26
在JavaScript中，可以使用Promise来实现串行操作。下面是一个简单的例子： ```javascript function asyncTask(time) { return new Promise((resolve, reject) => { setTimeout(() => { console.log('Async task completed after', time, 'ms'); resolve(); }, time); }); } asyncTask(1000) .then(() => asyncTask(2000)) .then(() => asyncTask(3000)) .then(() => { console.log('All tasks completed.'); }) .catch((error) => { console.error('An error occurred:', error); }); ``` 在上面的例子中，`asyncTask`函数返回一个Promise对象，它会在指定的时间后完成。我们通过调用`then`方法将这些异步任务串联起来。每个`then`方法都会等待前一个Promise对象完成后才会执行。如果任何一个异步任务发生错误，那么`catch`方法会捕获到错误并进行处理。 这样就实现了串行执行异步任务的效果。每个任务在前一个任务完成后才会开始执行，保证了它们的顺序性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值