Node.js异步编程之Promise

简介: 先来介绍一下Promise是什么?

Node.js异步编程之Promise

前言

先来介绍一下Promise是什么?

Promise:

  • 当前事件循环得不到的结果,但未来的事件循环会给到你结果
  • 是一个状态机

    • pending------还没有得到结果
    • fulfilled/resolved------得到了一个正确的结果
    • rejected------得到了一个错误的结果

状态.png

从代码入手👻

(function(){
    var promise = new Promise(function(resolve,reject){
        setTimeout(()=>{
            resolve();// reject(new Error());
        },500)
    })
    
    console.log(promise);
    
    setTimeout(()=>{
        console.log(promise);
    },800)
})();

这是一个从pending到resolved/rejected的过程。

那么可能有的小伙伴会想,我可不可以让他在300毫秒的时候转变成resolve的状态,在500毫秒的时候从resolved转变成rejected状态呢?那我们来实际操作一下看看结果吧。

我也有这样的疑惑
(function(){
    var promise = new Promise(function(resolve,reject){
        setTimeout(()=>{
            resolve();
        },300)
        setTimeout(()=>{
            reject(new Error());
        },300)
    })
    
    console.log(promise);
    
    setTimeout(()=>{
        console.log(promise);
    },800)
})();

浏览器.png

从结果我们可以看到,他还是fulfilled状态,也就是resolved状态,没有改变。

所以在resolved状态与rejected状态之间应该是不能转换的。

继续学习🐸

我们使用promise去解决异步问题,是希望他拿到结果之后就要立即通知我们,那这个时候我们要怎么去写呢?

我们可以借助promise下的一个方法,叫做then

把上面的代码进行改写

(function(){
    var promise = new Promise(function(resolve,reject){
        setTimeout(()=>{
            resolve(3);
        },300)
    }).then(function(res){
        console.log(res)
    }).catch(function(){
    
    })
    
    console.log(promise);
    
    setTimeout(()=>{
        console.log(promise);
    },800)
})();

可能有小伙伴注意到了,我们上面还多了一个catch方法,没错,他在这里也是用来处理error的,而error在promise里就对应着rejected状态了,将上面的代码再改点东西,就成了这样子。

(function(){
    var promise = new Promise(function(resolve,reject){
        setTimeout(()=>{
            reject(new Error());
        },300)
    }).then(function(res){
        console.log(res)
    }).catch(function(err){
        console.log(err)
    })
    
    console.log(promise);
    
    setTimeout(()=>{
        console.log(promise);
    },800)
})();
  • 关于.then和.catch

    • resolved状态的promise会回调后面的第一个.then
    • rejected状态的promise会回调后面的第一个.catch
    • 任何一个rejected状态且后面没有.catch的promise,都会造成浏览器/node环境的全局错误

为什么说promise优秀呢?

他可以解决异步流程控制的问题(这个在前面callback那节笔记有记过,可以去看一下))。

还是之前面试的问题,这次我们用promise的思路来看一下

(function(){
    var promise = interview();
    promise
    .then((res)=>{
        console.log('smile');
    })
    .catch((err)=>{
        console.log('cry')
    })

})();


function interview(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(Math.random()>0.2){
                resolve('success')
            }else{
                reject(new Error('fail'));
            }
        },500)
    })
}

小细节,拿笔记好📢

执行then和catch会返回一个新的promise,该promise最终状态根据then和catch的回调函数的执行结果决定

  • 如果回调函数是throw,那么promise就是rejected状态
  • 如果回调函数是return,那么promise就是resolved状态
  • 但如果回调函数最终return了一个promise,该promise回跟回调函数return的那个promise状态保持一致。

接下来用多轮面试的例子,来演示一下:

(function(){
    var promise = interview();
    promise
    .then((res)=>{
        return interview(2)
    })
    .then(()=>{
        return interview(3)
    })
    .then(()=>{
        console.log('smile');
    })
    .catch((err)=>{
        console.log('cry at  ' + err.round + '  round');
    })

})();


function interview(round){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(Math.random()>0.2){
                resolve('success')
            }else{
                var error = new Error('fail');
                error.round = round
                reject(error);
            }
        },500)
    })
}

想知道你在第几轮面试挂了吗?去执行一下试试吧!

小优化🎁

我们肯定是同时面试多家公司的呀,那我们再给上面的代码做一些优化吧。

(function(){
    Promise
    .all([
        interview('tencent'),
        interview('Ali88')
    ])
    .then(()=>{
        console.log('smile');
    })
    .catch((err)=>{
        console.log('cry for  ' + err.name );
    })

})();


function interview(name){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(Math.random()>0.2){
                resolve('success')
            }else{
                var error = new Error('fail');
                error.name = name
                reject(error);
            }
        },500)
    })
}

注意:

  • catch只能返回第一个面试挂的公司,如果都想知道就要存好所有的promise的状态并且打印出来哦。

最后

总觉得上面那个例子,面试通过一家,第二家挂了他会给我返回到catch里面去呢,可以在继续研究一下。

相关文章
|
8天前
|
前端开发 JavaScript
用JavaScript 实现一个简单的 Promise 并打印结果
用 JavaScript 实现一个简单的 Promise 并打印结果
|
8天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
12天前
|
前端开发 JavaScript 开发者
除了 async/await 关键字,还有哪些方式可以在 JavaScript 中实现异步编程?
【10月更文挑战第30天】这些异步编程方式在不同的场景和需求下各有优劣,开发者可以根据具体的项目情况选择合适的方式来实现异步编程,以达到高效、可读和易于维护的代码效果。
|
13天前
|
前端开发 JavaScript 开发者
深入理解JavaScript异步编程
【10月更文挑战第29天】 本文将探讨JavaScript中的异步编程,包括回调函数、Promise和async/await的使用。通过实例代码和解释,帮助读者更好地理解和应用这些技术。
25 3
|
12天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
14天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
21 1
|
23天前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
5天前
|
JavaScript 前端开发
深入理解Node.js中的异步编程模型
【10月更文挑战第39天】在Node.js的世界里,异步编程是核心所在,它如同自然界的水流,悄无声息却又无处不在。本文将带你探索Node.js中异步编程的概念、实践以及如何优雅地处理它,让你的代码像大自然的流水一样顺畅和高效。
|
1月前
|
消息中间件 前端开发 JavaScript
探索JavaScript中的事件循环机制:异步编程的核心
【10月更文挑战第12天】探索JavaScript中的事件循环机制:异步编程的核心
35 1
|
11天前
|
前端开发 JavaScript UED
探索JavaScript的异步编程模式
【10月更文挑战第33天】在JavaScript的世界里,异步编程是提升应用性能和用户体验的关键。本文将带你深入理解异步编程的核心概念,并展示如何在实际开发中运用这些知识来构建更流畅、响应更快的Web应用程序。从回调函数到Promises,再到async/await,我们将一步步解锁JavaScript异步编程的秘密,让你轻松应对各种复杂的异步场景。