使用Promise解决多层异步调用的简单学习

最新推荐文章于 2023-05-26 14:03:11 发布

knightingal

最新推荐文章于 2023-05-26 14:03:11 发布

阅读量772

点赞数

本文链接：https://blog.csdn.net/knightingal/article/details/50322601

版权

本文通过实例介绍了如何使用Promise解决JavaScript中多层异步调用导致的回调地狱问题，详细解释了Promise的使用方法，包括函数调用链的构建和返回值处理，以及如何通过返回Promise来实现异步操作的顺序执行。

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

使用Promise解决多层异步调用的简单学习

前言

第一次接触到Promise这个东西，是2012年微软发布Windows8操作系统后抱着作死好奇的心态研究用html5写Metro应用的时候。当时配合html5提供的WinJS库里面的异步接口全都是Promise形式，这对那时候刚刚毕业一点javascript基础都没有的我而言简直就是天书。我当时想的是，微软又在脑洞大开的瞎捣鼓了。

结果没想到，到了2015年，Promise居然写进ES6标准里面了。而且一项调查显示，js程序员们用这玩意用的还挺high。

讽刺的是，作为早在2012年就在Metro应用开发接口里面广泛使用Promise的微软，其自家浏览器IE直到2015年寿终正寝了都还不支持Promise，看来微软不是没有这个技术，而是真的对IE放弃治疗了。。。

现在回想起来，当时看到Promise最头疼的，就是初学者看起来匪夷所思，也是最被js程序员广为称道的特性：then函数调用链。

then函数调用链，从其本质上而言，就是对多个异步过程的依次调用，本文就从这一点着手，对Promise这一特性进行研究和学习。

Promise解决的问题

考虑如下场景，函数延时2秒之后打印一行日志，再延时3秒打印一行日志，再延时4秒打印一行日志，这在其他的编程语言当中是非常简单的事情，但是到了js里面就比较费劲，代码大约会写成下面的样子：

var myfunc = function() {
      
    setTimeout(function() {
   
        console.log("log1");
        setTimeout(function() {
   
            console.log("log2");
            setTimeout(function() {
   
                console.log("log3");
            }, 4000);
        }, 3000); 
    }, 2000);
}

由于嵌套了多层回调结构，这里形成了一个典型的金字塔结构。如果业务逻辑再复杂一些，就会变成令人闻风丧胆的回调地狱。

如果意识比较好，知道提炼出简单的函数，那么代码差不多是这个样子：

var func1 = function() {
   
    setTimeout(func2, 2000);
};

var func2 = function() {
   
    console.log("log1");
    setTimeout(func3, 3000);
};

var func3 = function() {
   
    console.log("log2");
    setTimeout(func4, 4000);
};

var func4 = function() {
   
    console.log("log3");
};

这样看起来稍微好一点了，但是总觉得有点怪怪的。。。好吧，其实我js水平有限，说不上来为什么这样写不好。如果你知道为什么这样写不太好所以发明了Promise，请告诉我。

现在让我们言归正传，说说Promise这个东西。

Promise的描述

这里请允许我引用MDN对Promise的描述：

Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算.。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。

Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

Promise对象有以下几种状态:

pending: 初始状态, 非 fulfilled 或 rejected。
fulfilled: 成功的操作。
rejected: 失败的操作。

pending状态的promise对象既可转换为带着一个成功值的fulfilled 状态，也可变为带着一个失败信息的 rejected 状态。当状态发生转换时，promise.then绑定的方法（函数句柄）就会被调用。(当绑定方法时，如果 promise对象已经处于 fulfilled 或 rejected 状态，那么相应的方法将会被立刻调用，所以在异步操作的完成情况和它的绑定方法之间不存在竞争条件。)

更多关于Promise的描述和示例可以参考MDN的Promise条目，或者MSDN的Promise条目。

尝试使用Promise解决我们的问题

基于以上对Promise的了解，我们知道可以使用它来解决多层回调嵌套后的代码蠢笨难以维护的问题。关于Promise的语法和参数上面给出的两个链接已经说的很清楚了，这里不重复，直接上代码。

我们先来尝试一个比较简单的情况，只执行一次延时和回调：

new Promise(function(res, rej) {
   
    console.log(Date.now() + " start setTimeout");
    setTimeout(res, 2000);
}).then(function() {
   
    console.log(Date.now() + " timeout call back");
});