JavaScript异步基础

惟一比不知道代码为何崩溃更可怕的事情是，不知道为何一开始它是工做的！

在 ECMA 规范的最近几回版本里不断有新成员加入，尤为在处理异步的问题上，更是不断推陈出新。然而，咱们在享受便利的同时，也应该了解异步究竟是怎么一回事。

如今与未来

JavaScript 是单线程的，一次只能专一于一件事。若是浏览器只靠 JavaScript 引擎线程来完成全部工做，先不说能不能搞定，即便能够，那也会花费很长时间。幸亏在浏览器里 JavaScript 引擎并不孤单，还有 GUI 渲染线程、事件触发线程、定时触发器线程、异步http请求线程等其它线程。这些线程之间的协做才有了咱们看到的浏览器界面效果（远不止这些）。

(盗了一张图)

一个程序在执行过程当中可能会有等待用户输入、从数据库或文件系统中请求数据、经过网络发送并等待响应，或是以固定时间间隔执行重复任务（好比动画）等状况。（这些状况，当下是没法得出结果的，可是一旦有告终果，咱们知道须要去作些什么。）

JavaScript 引擎不是一我的在战斗，它把以上的任务交给其它线程，并计划好任务完成后要作的事，JavaScript 引擎又能够继续作本身的事了。从这里能够看出，一个程序的运行包括两部分，如今运行和未来运行。而如今运行和未来运行的关系正是异步编程的核心。

let params = {type:'asynchronous'}
let response = ajax(params,'http://someURL.com'); // 异步请求
if (!response) throw '无数据！';

以上代码确定会抛错的，异步请求任务交出去以后，程序会继续运行下去。因为ajax(...) 是异步操做，即便马上返回结果，当下的 response 也不会被赋值。一个是如今，一个是未来，二者本就不属于一个时空的。

事件循环

如今和未来是相对的，等未来的时刻到了，未来也就成为了如今。

JavaScript 引擎运行在宿主环境中，宿主环境提供了一种机制来处理程序中多个块的执行，且执行每一个块时调用 JavaScript 引擎，这种机制被称为事件循环。即，JavaScript 引擎自己并无时间的概念，只是一个按需执行 JavaScript 任意代码片断的环境。

“事件”（JavaScript 代码执行）调度老是由包含它的环境进行。

点击图片进入或点此进入：

一个 JavaScript 运行时包含了一个待处理的消息队列。每个消息都关联着一个用以处理这个消息的函数。
在事件循环期间的某个时刻，运行时从最早进入队列的消息开始处理队列中的消息。为此，这个消息会被移出队列，并做为输入参数调用与之关联的函数。

while (queue.waitForMessage()) {
    queue.processNextMessage();
}

一旦有事件须要进行，事件循环就会运行，直到队列清空。事件循环的每一轮称为一个 tick。用户交互，IO 和定时器会向事件队列中加入事件。

(又盗了一张图)

任务队列

任务队列（job queue）创建在事件循环队列之上。（Promise 的异步特性就是基于任务。）

最好的理解方式，它是挂在事件循环队列的每一个tick以后的一个队列。在事件循环的每一个tick中，可能出现的异步动做不会致使一个完整的新事件添加到事件循环队列中，而会在当前 tick 的任务队列末尾添加一个项目（一个任务）。
即，由 Call Stack 生成的任务队列会紧随其后运行。

Promise.resolve().then(function promise1 () {
   console.log('promise1');
})
setTimeout(function setTimeout1 (){
    console.log('setTimeout1');
    Promise.resolve().then(function  promise2 () {
    console.log('promise2');
    })
}, 0)

setTimeout(function setTimeout2 (){
console.log('setTimeout2');
    Promise.resolve().then(function  promise3 () {
        console.log('promise3');
        setTimeout(function setTimeout3 () {
            console.log('setTimeout3');
        })
        Promise.resolve().then(function promise4 () {
            console.log('promise4');
        })
    })
}, 0)
// promise1
// setTimeout1
// promise2
// setTimeout2
// promise3
// promise4
// setTimeout3

异步回调

被做为实参传入另外一函数，并在该外部函数内被调用，用以来完成某些任务的函数，称为回调函数。回调函数常常被用于继续执行一个异步完成后的操做，它们被称为异步回调。当即执行的称之为同步回调。

回调函数是事件循环“回头调用”到程序中的目标，队列处理到这个项目的时候会运行它。

回调是 JavaScript 语言中最基础的异步模式。

生活中，咱们喜欢和有条理的人打交道，由于咱们的大脑习惯了这种思惟模式。然而回调的使用打破了这种模式，由于代码的嵌套使得咱们要在不一样块间切换。嵌套越多，逻辑越复杂，咱们也就越难理解和处理代码，尤为在表达异步的方式上。

(又盗了一张图)

除了嵌套的问题，异步回调还存在一些信任问题。

• 回调性质的不肯定
• 调用回调方式不肯定（没调用，重复调用等）
• ......

针对第一点的建议是：永远异步调用回调，即便就在事件循环的下一轮，这样，全部回调都是可预测的异步调用了。
在理解这个建议以前，咱们首先了解下控制反转，控制反转就是把本身程序一部分的执行控制交个某个第三方。

let a = 0; // A
thirdparty(() => {
    console.log('a', a);    // B
})
a++;    // C

A 和 C 是如今运行的，B 虽然代码是咱们的，可是却受制于第三方，由于咱们没法肯定它是如今运行仍是未来运行的。这里的回调函数多是同步回调也多是异步回调。a 是 0 仍是 1，都有可能。

// 同步回调
const thirdparty = cb => {
    cb();
}
// 异步回调
const thirdparty = cb => {
    setTimeout(() => cb(), 0);
}

因此，永远异步调用回调，可预测。

function asyncify(fn) {
    let func = fn;
    let t = setTimeout(() => {
        t = null;
        if (fn) fn();
    }, 0);
    fn = null;
    return () => {
        if (t) {
            fn = func.bind(this, ...arguments);
        } else {
            func.apply(this, arguments);
        }
    }
}

let a = 0;
thirdparty(asyncify(() => {
    console.log('a', a);
}))
a++;
// 1