ES6 Promise 执行解析

作为一门单线程的语言，刚学习 JavaScript 语言的时候，我曾怀疑过 JavaScript 在处理 ajax 数据请求，文件解析等过程效率会很低，而且在执行这些任务较大的代码中，会严重阻塞后面代码的执行。但让人兴奋的是，这门语言具有异步加载的特性。

事件循环

1. 含义

javascript 提供一种机制来处理程序中多个块的执行，且每个执行块都调用了 JavaScript 引擎，这种机制被称为事件循环。

2. setTimeout

setTimeout 在不清楚它的调用机制的时候，可能会容易掉坑。 一定要清楚的是，setTimeout 执行的时候，并没有把回调函数放入事件循环队列中，它做的事情只是设置一个定时器，当时间到时后，环境才会把回调函数加入到事件循环队列中

考虑下面的例子

setTimeout(function(){
    console.log("setTimeout")
},0)
console.log("console")
// console,setTimeout
复制代码

根据 setTimeout 的执行机制，这个例子的先后执行顺序就一目了然了。即便 setTimeout 的定时器时间为0，但是因为事件循环机制，且考虑到浏览器实行的延迟作用，setTimeout 依旧还是会慢与外界的 console。

回调

1.含义

回调是编写和处理 JavaScript 程序异步逻辑最常用的方式。

2.嵌套回调和链式回调

考虑:

listen('click',function handle(){
    setTimeout(function request(){
        ajax('http:XXX',function response(data){
            if(data.code===200){code...}
            else{code...}
        })
    },
    500)
})
复制代码

在我初学 javascript 的时候，常写这种函数嵌套在一起构成一条链的代码，因为它能按照我们想要执行的顺序执行，但是这种代码在嵌套多层的时候是很容易让人混乱的，这种代码常常被称为 回调地狱

不用嵌套将上述代码重写，可写为:

listen('click',handle)
function handle(){
    setTimeout(request,500)
}
function request(){
    ajax('http:XXX',response)
}
function response(data){
    if(data.code===200){code...}
    else{code...}
}
复制代码

3.总结

通过上述例子我们可以初步的理解回调的意义，下面将会讲解异步最常使用的 Promise。

Promise

1.含义

Promise（译为期望，期待），是一种封装和组合未来值的易于复用的机制；

2.语法

下面代码创造了一个 Promise 实例

const myPromise = new Promise(function(resolve,reject){
    // ...code
    if(/异步执行成功/) {
        resolve(value)
    } else {
        //异步执行失败
        reject(error)
    }
复制代码

resolve函数的作用是，当 Promise 的状态由未完成转变为成功时调用的函数，reject函数的作用是，当 Promise 的状态由未来城转变为失败时调用的函数 Promise 实例生成后，可以使用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数

myPromise.then(function(value){
    // success
    },function(error){
        //error
    }
)
复制代码

then 的方法可以接收两个参数，第一个回到函数是当 Promise 状态变为成功 resolved 时调用，第二个回调函数是当 Promise 状态变为失败 rejected 时调用，第二个参数是可选的，非必须的

3.实战练习

根据上面的事件循环机制，以及 Promise 的语法，考虑下方代码:

let myPromise = new Promise(function(resolve,reject){
    console.log("promise");
    resolve()
})
myPromise.then(function(){
    console.log("resolved.")
})
console.log("consolelog")
// promise
//consolelog
//resolved.
复制代码

上面代码中，Promise 新建后立即执行，所以首先输出的是 “Promise”，然后，then 方法指定回调函数，将当前脚本所有同步任务执行完之后再调用，所以 ，然后输出 “consolelog”，最后执行 then ，输出“resolved."

进而再考虑下面代码:

setTimeout(function(){console.log("setTimeout")},0)
let myPromise = new Promise(function(resolve,reject){
    console.log("promise");
    resolve()
}).then(function(){
    console.log("resolved.")
})
console.log("consolelog")
// promise -> consolelog -> resolved. -> setTimeout
复制代码

这段代码即是上面代码加上 setTimeout ，原理是相同的，因为 setTimeout 存在延迟，即便延迟时间为0，它都不属于 Promise 所在的同步任务事件队列中，所以，setTimeout 会在最后执行。

总结

本文主要讲解了 javascript 的事件循环机制，代码自上而下执行过程中，是存在异步执行的过程的，但在当前所有同步任务的执行依旧是自上而下的。另外，本文主要讲解了 Promise 的主要用法，详情可以参照 es6.ruanyifeng.com/#docs/promi…

猜欢迎大家在留言区探讨更多的  Promise 使用~

喜欢的点个赞呗~