给程序员看的Javascript攻略（完结）－异步

时间 2019-11-25

原文原文链接

原文发表在: holmeshe.me , 本文是汉化重制版。javascript

本系列在 Medium上同步连载。html

用ajax胡乱作项目的时候踩过好多坑，而后对JS留下了“很是诡异”的印象。系统学习后，发现这个构建了整个互联网表层的语言其实很是666。此次的学习已经告一段落，本篇也是这个系列的最后一部分。回头看来，把学习记录发出来这个经历挺奇特的，之前是写了给本身看，如今随便搞搞发来掘金就3000＋的总阅读，顿时感受有意义了不少。因此我也想明白了，你看，我就有动力写。java

其实没啥新鲜的

简单来说，异步有两层含义，1）让慢操做不要阻塞；2）非线性触发事件。稍稍讲深一点，在操做系统里，事件也叫中断，这里一次中断能够表明一个网络收包，一次时钟，或者一次鼠标点击，等。那从技术上层面看，一个事件能够中断当前进程，挂起下一条指令，而且“异步地”调用一个预设好的代码块（事件处理函数）。

应用层也同样。

阻塞操做的问题

狭义来讲，异步能够解决应用阻塞（通常是I/O）的问题。为啥要聊异步必定要说阻塞呢？那咱们从头来看看。每个带UI的应用（不管是嵌入式的，仍是APP，游戏仍是一个网页），底下都一个循环在很是快的刷新屏幕，那若是这个循环被阻塞了，好比在这个循环上进行了一次网络请求，UI就卡了，用户也就跑了。而JavaScript就跑在这个循环上。

此次要先作点实验前准备。

首先，下载 Moesif Origin & CORS Changer。这个用来让Chrome给咱们的跨站请求放行。

而后，咱们用Python来实现一个慢服务（API）：

from flask import Flask
import time
app = Flask(__name__)
@app.route("/lazysvr")
def recv():
  time.sleep(10)
  return "ok"
if __name__ == "__main__":
  app.run(host='***.***.***.***', threaded=True)复制代码

而后咱们打开 Moesif Origin & CORS Changer，（否则请求直接失败返回了），而后咱们跑例子：

<html>
<head>
</head>
<body>
  <button type="button">Click Me!</button> 
  <script>
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "http://***.***.***.***:5000/lazysvr", false ); // false for synchronous request
    xmlHttp.send( null ); // the thread is suspended here
    alert(xmlHttp.responseText);
  </script>
</body>
</html>复制代码

若是咱们打开开发者面板，能够很容易观察到，代码会卡在下面这行：

xmlHttp.send( null ); // it is the aforementioned blocking operation复制代码

在卡住的这10秒左右，按钮是点不动的，而后浏览器才会跳出弹窗：

ok复制代码

而且，Chrome会抱怨：

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.复制代码

暂且把这个看成对这个问题的官方描述吧。

来一波异步

广义来说，如下的都属于异步操做：

1）把慢操做放到其它线程执行；

2）由外部触发的事件；

3）二者的混合。

下面我会举三个例子来讲明

第一个🌰，收包

这个例子的代码也能够解决上节的阻塞问题，

打上码：

<html>
<head>
</head>
<body>
  <button type="button">Click Me!</button> 
  <script>
    var xmlHttp = new XMLHttpRequest();
--  xmlHttp.open( "GET", "http://192.241.212.230:5000/lazysvr", false );
++  xmlHttp.open( "GET", "http://192.241.212.230:5000/lazysvr", true ); // 1) change the param to "true" for asynchronous request

++  xmlHttp.onreadystatechange = function() { // 2) add the callback
++    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
++      alert(xmlHttp.responseText);
++    }
    }

    xmlHttp.send(); 
--  alert(xmlHttp.responseText);
  </script>
</body>
</html>复制代码

在上面的代码里，咱们1）把open()的第二个参数变成“true”，这样能够把慢操做负载到其它线程上去；2）注册一个回调函数来监听收报事件。这个回调函数在网络交互完成后会被当即执行。

此次按钮就能够点了，而后

ok复制代码

也按照预期弹出。

再来一个，时钟周期

直接先打上码：

setTimeout(callback, 3000);
function callback() {
  alert(‘event triggered’);
}复制代码

注意1，JS从一开始就没有同步的sleep()函数；

注意2，和开始说的OS不同，这个时钟是绝对不会触发进程调度的，正如以前提到，全部的JS代码都是运行在一条线程上。

第三个，点击鼠标

<html>
<head>
</head>
<body>
  <button type=”button” onclick=”callback()”>Click Me!</button> 
  <script>
    function callback() {
      alert(‘event triggered’);
    }
  </script>
</body>
</html>复制代码

在上面的三个例子中，咱们都给特定的事件（由非主循环触发）注册了回调函数。在第一个例子里，咱们还把一个慢操做负载到了其它线程来解决卡死的问题。全部这些操做均可以用一个词来归纳，异步！

新的fetch()接口

在第一个🌰中，我用回调来举例是由于比较直观。其实更好的办法是用fetch()来进行网络请求。这个函数会返回一个Promise对象，再用这个对象调用then()函数的话：python

1. 异步操做的代码就能够变成线性（更像同步）了；web

2. 回调地狱的问题能够获得解决了；ajax

3. 全部的相关异常，能够在一个代码块里处理了：chrome

<html>
<head>
</head>
<body>
  <button type=”button” onclick=”callback()”>Click Me!</button>
   <script>
    fetch(‘http://***.***.***.***:5000/lazysvr') .then((response) => { return response.text(); }).then((text) => { alert(text); }).catch(function(error) { console.log(‘error: ‘ + error.message); }); </script> </body> </html>复制代码

运行结果和第一个🌰同样，我仍是留了按钮给你试UI有没有卡。flask

底层机制，多线程＋事件循环

JS不是单线程吗？

答案是，便是也不是。什么意思？vim

var i;
for (i = 0; i < 1000; i++) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open( "GET", "http://***.***.***.***:5000/lazysvr", true );
  xmlHttp.onreadystatechange = function() {
     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        alert(xmlHttp.responseText);
    }
  } // end of the callback
  xmlHttp.send( null );
}复制代码

假设浏览器的pid是666（巧了，我作这个测试的时候还真是），咱们用一小段脚本（环境是Mac）原本观察线程状态：数组

#!/bin/bash
while true; do ps -M 666; sleep 1; done复制代码

初始值（我把无关的列和行都干掉了）：

USER     PID ... STIME    UTIME
holmes   666 ... 0:00.42  0:01.47
 ......
         666     0:00.20  0:00.64复制代码

结束的时候：

USER     PID ... STIME    UTIME
holmes   666 ... 0:00.50  0:01.88
 ......
         666     0:00.37  0:01.28复制代码

除了主线程，还有一条很是活跃的线程，我估摸着这条是用来监听网络的（多路复用）套接字。

因此JS代码确实是运行在一条线程里。可是若是从应用程序的角度来看，它实际上是多线程。用一样的办法测一下Node吧。

“粗”暴的事件循环

上文提到，操做系统的中断是以指令为粒度的，可是这个传说中的事件循环，粒度就有点大了：

var i;
for (i = 0; i < 3; i++) {
  alert(i);
}
setTimeout(callback, 0);
function callback() {
  alert(‘event triggered’);
}复制代码

咱们都知道结果是：

1
2
3
event triggered复制代码

简单来讲呢，虽然咱们注册了一个定时事件，而且指定它当即执行，可是JS引擎仍是在运行时忠实的把本次循环跑完，才会去理刚刚注册的那个事件。

这个表明通常事件中断是以指令周期为单位，而JS是以循环周期为单位的。

有点尴尬了，这么大粒度的事件处理会不会致使UI响应时间长呢？我以为其实不会。即便在以指令周期为单位的事件响应里，用户的操做仍是须要在本次"循环周期"结束放到主线程来，而后反映到UI。由于一切UI更新都要在主线程。因此，这个极其简化的单线程设计自己并不会对UI性能形成影响。你以为呢？

迟到的总结

这个系列中，我覆盖了在JS里被细化的 "等于" 操做符和 "null" 值，被简化的字符串，数组，对象和字典。而后我在这篇和这篇里深刻到prototype这一层进一步讨论了一下对象。最重要的是，我三次说起了this的坑：

第一次

第二次

第三次

说明真的很重要。

最后就是本篇了，用我理解的角度聊了一下异步。

若是你还记得的话，这个系列是我为新工做（临时）学JS准备的。以如今上手程度来看，我以为这个底子打的还不错，但愿对你也同样。可是这个文章并不全面，因此我准备了以下的附加阅读：

JavaScript types

Closure

The debug technique 我用来调试的方法

这篇颇有趣，我第一次读到，但愿有机会能翻译 interesting topic

Another place to understand “this”

More about event loop

A good blog, 最重要的事,

常来掘金看篇。

最后要认可第一段的结构是模仿乔帮主在第一次苹果（iPhone1）发布会的经典段式。（写这篇文章的时候，实在被最新的发布会感动了一把）。若是没看过去找找吧。

感谢阅读，后会有期！

给程序员看的Javascript攻略（完结）－ 异步