console.log不执行_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 的主要用法。

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

喜欢的点个赞呗~