异步编程发展历程之Promise的演进史

介绍

JavaScript是⼀⻔典型的异步编程脚本语⾔，在编程过程中会⼤量的出现异步代码的编写，在JS的整个发展历程中，对异步编程的处理⽅式经历了很多个时代，其中最典型也是现今使⽤最⼴泛的时代，就是Promise对象处理异步编程的时代。

那么什么是Promise对象呢？

Promise是ES6版本提案中实现的异步处理⽅式，对象代表了未来将要发⽣的事件，⽤来传递异步操作的消息。

为什么使⽤Promise对象

举例：在过去的编程中JavaScript的主要异步处理⽅式，是采⽤回调函数的⽅式来进⾏处理，想要保证n个步骤的异步编程有序进⾏，会出现如下的代码（以setTimeout为例）

javascript 复制代码

setTimeout(function(){
    //第⼀秒后执⾏的逻辑
    console.log('第⼀秒之后发⽣的事情')

    setTimeout(function(){
        //第⼆秒后执⾏的逻辑
        console.log('第⼆秒之后发⽣的事情')

        setTimeout(function(){
            //第三秒后执⾏的逻辑
            console.log('第三秒之后发⽣的事情')
        },1000)
    },1000)
},1000)

参考上⾯的代码，如果分3秒每间隔1秒运⾏1个任务，这三个任务必须按时间顺序执⾏，并且每个下⼀秒触发前都要先拿到上⼀秒运⾏的结果，那么我们不得不将代码编写为以上案例代码。该写法主要是为了保证代码的严格顺序要求，这样就避免不了⼤量的逻辑在回调函数中不停的进⾏嵌套，这也是我们经常听说的"回调地狱"。

举例：在编程中setTimeout的"例子"其实使⽤场景极少，在前端开发过程中使⽤最多的异步流程就是AJAX或其他异步请求，当系统中要求某个⻚⾯的n个接⼝保证有序调⽤的情况下就会出现下⾯的情况：

javascript 复制代码

$.ajax({
    url:'/***',
    success:function(res){
        var xxId = res.id
        //获取该类型的数据集合，必须等待回调执⾏才能进⾏下⼀步
        $.ajax({
            url:'/***',
            data:{
                xxId:xxId,//使⽤上⼀个请求结果作为参数调⽤下⼀个接⼝
            },
            success:function(res1){
                //得到指定类型集合
                ...
            }
        })
    }
})

这种情况在很多⼈的代码中都出现过，如果流程复杂化，在⽹络请求中继续夹杂其他的异步流程，那么这样的代码就会变得难以维护了。其他的"例子"诸如Node中的原始fs模块，操作⽂件系统这种就不举了，所以之所以在ECMA提案中出现Promise解决⽅案，就是因为此类代码导致了JS在开发过程中遇到的实际问题：【回调地狱】。其实解决回调地狱的⽅式还有其他⽅案，本节我们不多做介绍中间的过渡⽅案，核⼼介绍Promise流程控制对象，因为他是解决回调地狱的⾮常好的⽅案。

使⽤Promise如何解决异步控制问题

前⾯的章节仅仅是抛出了问题，并没有针对问题作出⼀个合理的回答。下⾯阐述⼀下如何使⽤Promise对象解决回调地狱问题。

在阐述之前，我们先对Promise做⼀个简单的介绍：

Promise对象的主要⽤途是通过链式调⽤的结构，将原本回调嵌套的异步处理流程，转化成"对象.then().then()..."的链式结构，这样虽然仍离不开回调函数，但是将原本的回调嵌套结构，转化成了连续调⽤的结构，这样就可以在阅读上编程上下左右结构的异步执⾏流程了。（流数据结构：利于人的思维）

举例：

javascript 复制代码

//使⽤Promise拆解的setTimeout流程控制
const p = new Promise(function(resolve){
    setTimeout(function(){
        resolve()
    },1000)
})

p.then(function(){
    //第⼀秒后执⾏的逻辑
    console.log('第⼀秒之后发⽣的事情')
    
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve()
        },1000)
    })
}).then(function(){
    //第⼆秒后执⾏的逻辑
    console.log('第⼆秒之后发⽣的事情')
    
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve()
        },1000)
    })
}).then(function(){
    //第三秒后执⾏的逻辑
    console.log('第三秒之后发⽣的事情')
})

结合代码案例我们发现使⽤了Promise后的代码，将原来的3个setTimeout的回调嵌套，拆解成了三次then包裹的回调函数，按照上下顺序进⾏编写。这样我们从视觉上就可以按照⼈类的从上到下从左到右的线性思维来阅读代码，这样很容易能查看这段代码的执⾏流程，代价是代码的编写量增加了接近1倍。

Promise介绍

从上⾯的案例介绍得知Promise的作⽤是解决"回调地狱"，他的解决⽅式是将回调嵌套拆成链式调⽤，这样便可以按照上下顺序来进⾏异步代码的流程控制。那么Promise是如何实现这个能⼒的呢？

Promise的结构

Promise对象是⼀个JavaScript对象也是一个构造函数，在⽀持ES6语法的运⾏环境中作为全局对象提供，他的初始化⽅式如下：

javascript 复制代码

// fn:是初始化过程中调⽤的函数他是同步的回调函数
const p = new Promise(fn)

关于回调函数

这⾥涉及到⼀个概念：JavaScript语⾔中，有⼀个特殊的函数叫做回调函数(函数是JavaScript一等公民)。回调函数的特点是把函数作为变量看待，由于JavaScript变量可以作为函数的形参并且函数可以通过声明变量的⽅式匿名创建，所以我们可以在定义函数时将⼀个函数的参数当作函数来执⾏，进⽽在调⽤时在参数的位置编写⼀个执⾏函数，代码如下：

javascript 复制代码

//把fn当作函数对象那么就可以在test函数中使⽤()执⾏他
function test(fn){
    fn()
}

//那么运⾏test的时候fn也会随着执⾏，所以test中传⼊的匿名函数就会运⾏
test(function(){
    ...
})

上⾯的代码结构，就是JavaScript中典型的回调函数结构。按照我们在事件循环中介绍的JavaScript函数运⾏机制，会发现其实回调函数本身是同步代码，这是⼀个需要【重点理解】的知识点。

通常在编写JavaScript代码时，使⽤的回调嵌套的形式⼤多是异步函数，所以⼀些开发者可能会下意识的认为，凡是回调形式的函数都是异步流程。其实并不是这样的，真正的解释是（重点！！！）：JavaScript中的回调函数结构，默认是同步的结构，由于JavaScript单线程异步模型的规则，如果想要编写异步的代码，必须使⽤回调嵌套的形式才能实现，所以回调函数结构不⼀定是异步代码，但是异步代码⼀定是回调函数结构。

那么为什么异步流程都需要回调函数？

在JavaScript中，异步流程通常需要回调函数的原因在于JavaScript的运行机制和事件循环（Event Loop）模型。JavaScript是一种单线程语言，这意味着在任何给定时刻，只有一个任务（或操作）可以被执行。

然而，很多操作，特别是那些涉及I/O（输入/输出）的操作，如网络请求、文件读写、定时器等，都需要花费一定的时间来完成，这些操作被称为异步操作。

由于JavaScript的单线程特性，如果异步操作被执行时阻塞了主线程，那么浏览器或Node.js环境将无法响应用户交互或其他任务，这将导致应用程序的响应性变差。

为了避免这种情况，JavaScript采用了事件循环模型和异步非阻塞的执行方式来处理这些操作。

回调函数在这里扮演了关键角色，原因如下：

非阻塞性：异步操作不会阻塞主线程，这意味着JavaScript可以继续执行后续的同步代码。当异步操作完成时，相关的回调函数将被放入任务队列（Task Queue）中等待执行。
事件循环：JavaScript的事件循环会不断地检查任务队列，一旦主线程空闲（即没有正在执行的同步代码），事件循环就会从任务队列中取出回调函数并执行它们。这样可以确保异步操作的结果被及时处理，而不会影响主线程的流畅运行。
处理结果：回调函数提供了一种机制，允许开发者定义异步操作完成后应该执行的代码。这使得开发者可以处理异步操作的结果，或者在操作失败时执行错误处理逻辑。
控制流程：在某些情况下，异步操作的顺序和结果对程序的逻辑至关重要。回调函数允许开发者根据异步操作的完成情况来控制程序的流程。

然而，回调函数也带来了一些问题，如回调地狱（callback hell），这是指当多个异步操作嵌套或链接在一起时，代码变得难以阅读和维护。为了解决这些问题，JavaScript引入了Promise和其他等更现代的异步编程解决方案，它们提供了更清晰和更易于管理的方式来处理异步流程。

解读Promise结构

从运⾏流程上我们会发现new Promise中的回调函数确实是在同步任务中执⾏的，其次是如果这个回调函数内部没有执⾏resolve或者reject那么p对象的后⾯的回调函数内部都不会有输出，⽽运⾏resolve函数之后.then和.finally就会执⾏，运⾏了reject之后.catch和.finally就会执⾏。

剖析对象结构

Pomise对象相当于⼀个未知状态的对象，他的定义就是声明⼀个等待未来结果的对象，在结果发⽣之前他⼀直是初始状态，在结果发⽣之后他会变成其中⼀种⽬标状态，它的名字Promise中⽂翻译为保证。

很多国外的电影台词都会涉及到Promsie这个单词，⽐如⼩明发现了邻居张三的妻⼦出轨了，在某天喝酒的时候⼩明和张三说：I saw your wife played with other man! I promise! I saw it！张三当然会说：No！shit！I can not trust you！dame！（语义⾃⾏理解），Promise在英⽂中是绝对保证的意思，所以在编程中Promise对象是⼀个⾮常严谨的对象，⼀定会按照约定执⾏，不会出现任务灵异问题（除使⽤不当外）。

那么Promise本身具备三种状态：

pending：初始状态，也叫就绪状态，这是在Promise对象定义初期的状态，这时Promise仅仅做了初始化并注册了他对象上所有的任务。
fulfilled：已完成，通常代表成功执⾏了某⼀个任务，当初始化函数中的resolve执⾏时，Promise的状态就变更为fulfilled，并且then函数注册的回调函数会开始执⾏，resolve中传递的参数会进⼊回调函数作为形参。
rejected：已拒绝，通常代表执⾏了⼀次失败任务，或者流程中断，当调⽤reject函数时，catch注册的回调函数就会触发，并且reject中传递的内容会变成回调函数的形参。

三种状态之间的关系：

Promise中约定，当对象创建之后同⼀个Promise对象只能从pending状态变更为fulfilled或rejected中的其中⼀种，并且状态⼀旦变更就不会再改变，此时Promise对象的流程执⾏完成并且finally函数执⾏。

总结

分析了对象结构和状态后，我们了解了Promise的异步回调部分如何执⾏，取决于我们在初始化函数中的操作，并且初始化函数中⼀旦调⽤了resolve后⾯再执⾏reject也不会影响then执⾏，catch也不会执⾏，反之同理。

⽽在初始化回调函数中，如果不执⾏任何操作，那么promise的状态就仍然是pending，所有注册的回调函数都不会执⾏。

关于链式调⽤

链式调⽤这个⽅式最经典的体现是在JQuery框架上，到现在仍然很多语⾔都在使⽤这种优雅的语法（不限前端还是后台），所以我们来简单认识⼀下什么是链式调⽤，为什么Promise对象可以.then().catch()这样调⽤。为什么还能.then().then()这样调⽤，他的原理⼤概是这样的。

javascript 复制代码

function MyPromise(){
    return this
}
MyPromise.prototype.then = function(){
    console.log('触发了then')
    return this
}
new MyPromise().then().then().then()

其实他的本质就是在我们调⽤这些⽀持链式调⽤的函数的结尾时，他⼜返回了⼀个包含他⾃⼰的对象或者是⼀个新的⾃⼰，这些⽅式都可以实现链式调⽤。

Promise使⽤注意事项

在⽹⻚中运⾏如下代码查看返回结果：

javascript 复制代码

const p = new Promise(function(resolve,reject){
    resolve('我是Promise的值')
})
console.log(p)

控制台上会得到如下内容：

javascript 复制代码

> Promise {<fulfilled>: '我是Promise的值'}
    [[Prototype]]: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: "我是Promise的值"

前端异步编程发展历程

异步编程发展历程之Promise的演进史

介绍

为什么使⽤Promise对象

使⽤Promise如何解决异步控制问题

Promise介绍

Promise的结构

关于回调函数

那么为什么异步流程都需要回调函数？

解读Promise结构

剖析对象结构

总结

关于链式调⽤

Promise使⽤注意事项