JavaScript异步编程入门

JS只能是单线程的

• 进程：CPU资源分配的基本单位
• 线程：CPU执行的最小单位；是建立在进程的基础上运行的单位，共享进程的内存空间

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

任务队列

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

程序里面所有的任务，可以分成两类：同步任务（synchronous）和异步任务（asynchronous）。

• 同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。

• 异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。

  举例来说，Ajax 操作可以当作同步任务处理，也可以当作异步任务处理，由开发者决定。如果是同步任务，主线程就等着 Ajax 操作返回结果，再往下执行；如果是异步任务，主线程在发出 Ajax 请求以后，就直接往下执行，等到 Ajax 操作有了结果，主线程再执行对应的回调函数

具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

下图就是主线程和任务队列的示意图。

只要主线程空了，就会去读取”任务队列”，这就是JavaScript的运行机制。这个过程会不断重复。

事件和回调函数

“任务队列”是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在”任务队列”中添加一个事件，表示相关的异步任务可以进入”执行栈”了。主线程读取”任务队列”，就是读取里面有哪些事件。

“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入”任务队列”，等待主线程读取。

所谓”回调函数”（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

“任务队列”是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，”任务队列”上第一位的事件就自动进入主线程。但是，由于存在后文提到的”定时器”功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

Event Loop

主线程从”任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在”任务队列”中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取”任务队列”，依次执行那些事件所对应的回调函数。

加入任务队列中的事件是因为要获取到结果会很慢，进而释放CPU的执行权，进入任务队列；CPU继续执行函数栈中的代码，执行完毕，再去执行任务队列中的回调函数

执行栈中的代码（同步任务），总是在读取”任务队列”（异步任务）之前执行。请看下面这个例子。

    var req = new XMLHttpRequest();
    req.open('GET', url);    
    req.onload = function (){};    
    req.onerror = function (){};    
    req.send();

上面代码中的req.send方法是Ajax操作向服务器发送数据，它是一个异步任务，意味着只有当前脚本的所有代码执行完，系统才会去读取”任务队列”。所以，它与下面的写法等价。

 var req = new XMLHttpRequest();
    req.open('GET', url);
    req.send();
    req.onload = function (){};    
    req.onerror = function (){};

也就是说，指定回调函数的部分（onload和onerror），在send()方法的前面或后面无关紧要，因为它们属于执行栈的一部分，系统总是执行完它们，才会去读取”任务队列”。

JS中的异步编程

异步任务

1. 定时任务
2. ajax请求
3. 事件函数

上图的代码是打印的依然是---，并不是接口返回的数据，因为ajax是异步任务，JS会将其回调函数放到任务队列，主线程接着去执行下面的代码：console.log(ret)，那么打印出来的自然是'---'；等到主线程所有任务执行完毕，再去依次执行任务队列的回调函数们

多次异步调用的依赖分析

1. 多次异步调用的结果顺序不确定

   多次执行n个ajax请求，每个请求的延迟不同，回调函数的执行顺序也是不同的

2. 异步调用结果如果存在依赖，需要嵌套

   

   通过回调函数的嵌套，实现异步调用的按照顺序执行；但是如果嵌套层次比较多，那么代码可读性比较差，称为回调地狱

Promise

本质上，Promise 是一个对象，代表操作的中间状态 —— 正如它的单词含义 ‘承诺’ ，它保证在未来可能返回某种结果。虽然 Promise 并不保证操作在何时完成并返回结果，但是它保证当结果可用时，你的代码能正确处理结果，当结果不可用时，你的代码同样会被执行，来优雅的处理错误。

好处

使用promise的好处：

1. 避免多层异步调用嵌套问题（回调地狱）
2. promise对象提供了简洁的api，控制异步操作更加简单

注意

1. 创建promise时，它既不是成功也不是失败状态。这个状态叫作pending（待定）。
2. 当promise返回时，称为resolved（已解决）
   1. 一个成功resolved的promise称为fulfilled（实现）。它返回一个值，可以通过将.then()块链接到promise链的末尾来访问该值。.then()块中的执行程序函数将包含promise的返回值。
   2. 一个不成功resolved的promise被称为rejected（拒绝）了。它返回一个原因（reason），一条错误消息，说明为什么拒绝promise。可以通过将.catch()块链接到promise链的末尾来访问此原因。

基本用法

发送多个ajax请求并保证顺序

将回调地狱改善成了链式编程，实现线性调用

then参数中的函数返回值对象

1. 返回promise实例对象

   返回的该实例对象会调用下一个then

2. 返回普通值

   返回的普通值会传递给下一个then，通过then参数中函数的参数接收该值

   没有返回实例对象，then会默认创建一个promise实例对象，以此来保证可以调用下一个then

promise的实例方法

console.dir(Promise)就可以打印此对象所有的属性和方法，那么就可以看到原型方法

prototype中的方法，通过函数对象调用

p.then()：得到异步任务的正确结果；即resolve函数的参数值

p.catch()：获取异常信息；即reject函数的参数值

p.finally：成功与否都会执行

promise的对象方法

通过函数名称调用的方法

p1,p2,p3都是实例对象

async和await

async必须在await所在的函数前面

• await会阻塞后面代码的执行，事实上， await 只在异步函数里面才起作用。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。等到promise的结果确定后再继续执行

• 将async添加到函数声明中，可以告诉函数返回的是promise，而不是直接返回值

axios.get的返回值是一个Promise实例对象，在其前面加上await，直接得到异步的结果（在promise中存放着），不再需要调用实例方法then和回调函数，代码更加简洁，可以直接获取到异步任务的结果

async函数的返回值是Promise实例对象，那么可以调用实例方法then得到其返回值

多个异步请求的场景：