Promise使用细节

fnngj 发布于2019-08-22 16:31 / 1546人阅读

摘要：应用把一个异步操作和定时器放在一起。如果定时器先触发就提示用户超时用户超时什么是值穿透或者期望传入一个函数如果不是函数会发生值穿透和的第二个参数的区别比较类似是一个语法糖相当于还有一点区别就是如果第一个报错第二个无法捕获。

Promise使用细节

使用promise需要注意的几点:

1.如何用promise实现并行的异步 (Promise.all配合.map)

Promise.all()参数 : 一个很多promise组成的数组

Promise.all()返回值 : 当所有异步都执行完后,promise.all的状态才变成fulfilled,返回一个各个结果组成的数组

       var arr = []
        for ( let i = 0; i < 5; i++ ) {
            arr.push( new Promise( ( resolve ) => {
                setTimeout( () => {
                    console.log( i )
                    resolve("结果：" + i)
                }, i * 1000 )
            } ) )
        }

        
        Promise.all(arr).then(val => {
            console.log(val)
        })

2.用Promise串行的异步

then的链式调用

配合forEach或者reduce

3.Promise.race的用法

Promise.race()和all类似,也可以并行,但是它是只要有一个子promise完成了,race()的状态也就完成了。

应用: 把一个异步操作和定时器放在一起。如果定时器先触发就提示用户超时

        let ajaxData = ""
        const ajax = new Promise( ( resolve ) => {
            setTimeout( () => {
                console.log( "ajax" )
                ajaxData = "ajax"
                resolve()
            }, 3000 )
        } )

        const timer = new Promise( ( resolve ) => {
            setTimeout( () => {
                if(ajaxData== ""){
                    console.log( "用户超时" )
                }else{

                }
                
                resolve()
            }, 2000 )
        } )
        Promise.race( [ timer, ajax ] ).then( (data) => {
            console.log(data)
        } )

4.什么是值穿透?

.then或者.catch期望传入一个函数,如果不是函数,会发生值穿透

      Promise.resolve(1)
            .then(2)
            .then(3)
            .then(val => {
                console.log(val)
            })

5.catch和then的第二个参数的区别?

比较类似,catch是一个语法糖,相当于then(null,() => {})

还有一点区别就是,如果第一个then报错,第二个then无法捕获。catch可以

6.如果catch或者then的第二个参数也抛出异常了,该如何处理?

通过全局添加一个unhandledrejection捕获Promise异常

window.addEventListener("unhandledrejection", (e) =>{
    console.log(e.reason)
})    

let promise = new Promise((resolve, reject) => {
    reject("Hello World")
});

promise.catch((err) => {
    throw("Unexpected Error");     // Unexpected Error
})

7.为什么then返回的都是Promise对象?

then如果你return的不是promise对象,自动用Promise.resolve包装一下

then的链式调用,并不是通过return this,而是通过每次创造一个新的promise实例

8.一道关于Promise应用的面试题 ：红灯三秒亮一次，绿灯一秒亮一次，黄灯2秒亮一次；如何让三个灯不断交替重复亮灯？（用Promse实现）

        function tip( timer, fn ) {
            return new Promise( resolve => {
                setTimeout( () => {
                    fn()
                    resolve()
                }, timer )
            } )
        }
        
        function step() {
            var d = Promise.resolve()
            d.then( () => {
                    return tip( 3000, () => {
                        console.log( "red" )
                    } )
                } )
                .then( () => {
                    return tip( 1000, () => {
                        console.log( "green" )
                    } )
                } )
                .then( () => {
                    return tip( 2000, () => {
                        console.log( "yellow" )
                    } )
                } )
                .then(() => {
                    step()
                })
        }

        step()

更多文章，可关注https://github.com/ziwei3749/...

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

参考和一些面试题资料 :

PromiseA+规范

你可能不知道的promise

一道promise面试题

Promise 必知必会（十道题

理解 Promise 的工作原理

JavaScript Promise迷你书（中文版

Node.js最新技术栈之Promise篇

私有云云服务器 Promise使用细节分析页面细节细节

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94429.html

深入理解 Promise 实现细节

摘要：显然，了解的实现细节，可以帮助我们更好地应用它。本文将主要根据的这篇文章，探讨的实现细节。核心说明尽管已经有自己的规范，但目前的各类库，在的实现细节上是有差异的，部分甚至在意义上完全不同。到前面到为止，所实现的都是不能级联的。在之前的异步JavaScript与Promise一文中，我介绍了Promise以及它在异步JavaScript中的使用意义。一般来说，我们是通过各种JavaSc...

junbaor 2019-08-21 10:27 评论0 收藏0
Promise 规范解读及实现细节 (二)

摘要：开始前的实现原理已经在规范解读及实现细节一中说的很清楚了，这里将详细分析规范中的解析过程，最后会实现一个并提供用于测试的代码方法分析这里的调用会产生一个新的不同实例对于上一级的终值会作为的参数被传入对于如果返回一个返回一个那么的状态和值由决开始前 Promise的实现原理已经在 Promise 规范解读及实现细节 (一) 中说的很清楚了，这里将详细分析 Promises/A+规范中...

Michael_Lin 2019-08-21 16:01 评论0 收藏0
Promise 规范解读及实现细节 (一)

摘要：宏任务和微任务这两个是指两个队列，脚本整体代码的回调及渲染都会被加入到队列中回调浏览器实现回调都会被加入到队列。 1. macrotask （宏任务）和 microtask （微任务）这两个是指两个队列，脚本整体代码、setTimeout、setInterval、setImmediate、I/O、的回调及UI渲染都会被加入到 macrotask 队列中, process.nextTi...

gougoujiang 2019-08-20 17:51 评论0 收藏0
读懂 SOLID 的「依赖倒置」原则

这是理解SOLID原则中，关于依赖倒置原则如何帮助我们编写低耦合和可测试代码的第一篇文章。写在前头当我们在读书，或者在和一些别的开发者聊天的时候，可能会谈及或者听到术语SOILD。在这些讨论中，一些人会提及它的重要性，以及一个理想中的系统，应当包含它所包含的5条原则的特性。我们在每次的工作中，你可能没有那么多时间思考关于架构这个比较大的概念，或者在有限的时间内或督促下，你也没有办法实践一些好...

Snailclimb 2019-08-22 13:57 评论0 收藏0
从零开始写一个 Promise 库

摘要：是什么在规范中，是一个类，它的构造函数接受一个函数。在这种情况下，是但处于状态。与一起使用关键字会暂停执行一个函数，直到等待的变成状态。此外，会一直等待调用直到下一个时序。原文：Write Your Own Node.js Promise Library from Scratch作者：code_barbarian Promise 已经是 JavaScript 中异步处理的基石，回调...

Binguner 2019-08-22 16:20 评论0 收藏0