漫谈promise使用场景

最新推荐文章于 2024-02-25 16:43:53 发布

缘自世界

最新推荐文章于 2024-02-25 16:43:53 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： promise es6 javascript

本文链接：https://blog.csdn.net/weixin_41559723/article/details/79244460

版权

本文探讨Promise在JavaScript中的重要性，解释其是什么，如何解决异步编程的痛点，详细阐述Promise的三种状态及其转换规则，并通过实例介绍Promise与Ajax、Promise.all()、Promise.race()的结合使用，以及如何将普通对象转化为Promise对象。同时，文章也指出Promise存在的问题，如无法取消、错误处理限制等，并提及ES7的async/await作为解决方案。

摘要由CSDN通过智能技术生成

深入理解promise

对于现在的前端同学来说你不同promise你都不好意思出门了。对于前端同学来说promise已经成为了我们的必备技能。

那么，下面我们就来说一说promise是什么，它能帮助我们解决什么问题，我们应该如何使用它？

这是我个人对promise的理解。欢迎吐槽：)

Promise是什么

promise的意思是承诺，有的人翻译为许愿，但它们代表的都是未实现的东西，等待我们接下来去实现。

Promise最早出现在commnjs，随后形成了Promise/A规范。在Promise这个技术中它本身代表以目前还不能使用的对象，但可以在将来的某个时间点被调用。使用Promise我们可以用同步的方式写异步代码。其实Promise在实际的应用中往往起到代理的作用。例如，我们像我们发出请求调用服务器数据，由于网络延时原因，我们此时无法调用到数据，我们可以接着执行其它任务，等到将来某个时间节点服务器响应数据到达客户端，我们即可使用promise自带的一个回调函数来处理数据。

Promise能帮我们解决什么痛点

JavaScript实现异步执行，在Promise未出现前，我们通常是使用嵌套的回调函数来解决的。但是使用回调函数来解决异步问题，简单还好说，但是如果问题比较复杂，我们将会面临回调金字塔的问题（pyramid of Doom）。

var a = function() {
   
    console.log('a');
};

var b = function() {
   
    console.log('b');
};

var c = function() {
   
    for(var i=0;i<100;i++){
        console.log('c')
    }  
};

a(b(c)); // 100个c -> b -> a

我们要桉顺序的执行a，b，c三个函数，我们发现嵌套回调函数确实可以实现异步操作（在c函数中循环100次，发现确实是先输出100个c，然后在输出b，最后是a）。但是你发现没这种实现可读性极差，如果是几十上百且回调函数异常复杂，那么代码维护起来将更加麻烦。

那么，接下来我们看一下使用promise（promise的实例可以传入两个参数表示两个状态的回调函数，第一个是resolve，必选参数；第二个是reject，可选参数）的方便之处。

var promise = new Promise(function(resolve, reject){
   
    console.log('............');
    resolve(); // 这是promise的一个机制，只有promise实例的状态变为resolved，才会会触发then回调函数
});

promise.then(function(){
   
    for(var i=0;i<100;i++) {
        console.log('c')
    }    
})
.then(function(){
   
    console.log('b')
})
.then(function(){
   
    console.log('a')
})