【翻译】异步 Javascript 系列（一）—— 简介

十分喜欢 Youtube 上 The Net Ninja 上 Shaun 老师的免费课程，在这记录学习到的知识并尽能力翻译分享老师在视频中传授的知识。

Shaun

关于 Shaun，顺祝 Shaun 在 Udemy 上发布商业课程。

异步 Javascript 视频地址 需要翻墙。

Okay. Let's get started.

---

异步 Javascript

究竟什么是异步 Javascript, 异步 Javascript 在 Web 中随处可见，假如你写过相当数量的 Javascript，很有可能已经写过一部分异步代码，诸如未能马上返回结果的如读取数据或其他操作。这就是异步，简而言之(in a nutshell)，异步代码能做到现在开始，过会儿结束。

异步 Javascript

例如：我们使用异步代码，如 Youtube API 进行数据抓取，取代阻塞代码（等待 API 响应，才能进行一个处理），异步 Javascript 允许你的代码继续执行直到 API 响应。当响应的时候，可以拿到响应回来的数据，跟同步代码形成了鲜明的对比。

首先，我们写的Javascript 代码在一个独立的线程运行，意味着它一次只能做一件事。

同步代码是等待一个动作完成后再继续下一个动作

下图代码是同步代码的极简例子，使用叫 readSync 函数去读取数据，readSync 是同步的，因此不会等待类似回调函数（callback），而是等到整个读取数据的动作完成才会继续做下一件事，所以记着同步代码是等待一个动作完成后再继续下一个动作。因此，下图代码的意思是，执行读取数据操作，并等待完成，然后在控制台中输出返回结果（article），一个完成到下一个，然后再输出(authors)到控制台。

同步 Javascript

你可能会觉得还好，只是按步骤处理而已，但假如这个读取的文件体积极其庞大呢，耗费时间可能需要 10 秒，你能做的是只能等待它读取数据完毕，它执行完读取数据操作之前你什么都不能做。

因此我们只能挂起 10 秒，而其他 Javascript 不会被执行。这样的处理不好，因此我们需要使用异步代码，用于对抗这种情况。

异步代码

异步代码如下图，做同样的事情，使用叫 readAsync 的 函数读取数据，同样抓取数据，这个异步函数将会执行某种请求, 它说：“我即将要进入一个独立的线程，可以先不用理会我，做你下一个操作，等到我完成我读取的任务，我会在回调方法中返回数据给你，然后你就可以将数据输出到控制台中”。

image.png

因此，不需要再排队等待一个完整读取的动作才进行下一步操作，我们只需要将读取动作放到一个独立的线程，然后我们即可以执行下一步操作。之前我提过 JavaScript 只运行于一个线程，区别是我们写的 Javascript 是运行于一个（主）线程中，但如这种异步请求 Javascript 会交给独立线程进行处理，即运行于 Javascript 之外，这样就可以让 Javascript （主）线程有空闲继续下一步的任务。

图示解释

异步 Javascript

• 图左侧是异步版本，函数队列（一连串的方格）里的每个方格代表一个函数，Javascript 会顺序执行函数队列的函数，每次处理一个函数，因此首先会触发第一个，完成后继续下一个，遇到 requset (异步)函数的时候，会交给独立线程进行处理（读取数据等操作），同时，Javascript （主）线程可以继续执行下一个函数，如此反复，当异步代码获取到数据，独立线程的回调函数（callback）会从函数队列或 Javascript （主）线程的最后加入，当队列上剩余的函数都执行完毕，回调函数就会被执行，带上读取回来的数据。这是一个很好的做法

• 图右侧是同步版本，从第一个函数开始，到第二个 requset (同步)函数，Javascript 将会等待这个函数完成读取并返回数据，因此会延误剩下需要执行的函数，可能会花费 10 秒吗，影响到其他需要继续执行的函数。

明显的，图左侧是更好的方式，这是一种更好或更优雅的处理控制异步请求的方式。接下来的课程，我们就是继续深入异步处理的方式，下面也将会在课程中一起学习。

异步控制流

• 首先是简介回调函数，是不错的，但可能会引起混乱，下节课我们会查看回调函数
• Promise 是更好的方式
• Generators 是 ES6 新增的 API，是一个超棒的异步代码处理方案

以上就是异步代码的简要介绍。

下章内容《Ajax 请求》待更新