【译】JavaScript的工做原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

时间 2019-11-07

标签 javascript 原理事件循环异步编程出现更好 async await 方式栏目 JavaScript 繁體版

原文原文链接

此篇是JavaScript的工做原理的第四篇，其它三篇能够看这里：javascript

此次咱们将经过回顾在单线程环境中编程的缺点以及如何克服它们来构建使人惊叹的JavaScript UI来扩展咱们的第一篇文章。按照传统，在文章的最后，咱们将分享有关如何使用async / await编写更清晰代码的5个技巧。前端

为何单线程有局限性？

在第一篇文章中，咱们提到过一个问题：当调用栈中含有须要长时间运行的函数调用的时候会发生什么。
想象一下，例如，当浏览器中运行着一个复杂的图片转换算法。
在这个时候，堆栈中正好有函数在执行，浏览器此时不能作任何事情。此时，他被阻塞了。这意味着它不能渲染，不能运行其余代码，他被卡住了，没有任何响应。这就带来了一个问题，你的程序再也不是高效的了。
你的程序没有相应了。
在某些状况下，这没有什么大不了的，可是这可能会形成更加严重的问题。一旦浏览器在调用栈中同时运行太多的任务的时候，浏览器会很长时间中止响应。在那个时候，大多数浏览器会抛出一个错误，询问是否终止网页。java

这很丑陋且它彻底摧毁了程序的用户体验。c++

Javascript程序的构建模块

你可能会在单一的 .js 文件中书写 JavaScript 程序，可是程序是由多个代码块组成的，当前，只有一个代码块在运行，其它代码块将在随后运行。最多见的块状单元是函数。
许多 JavaScript 新的开发者可能须要理解的问题是以后运行表示的是并非必须当即在如今以后就执行。换句话说即，根据定义，如今不可以运行完毕的任务将会异步完成，这样你就不会不经意间遇到以上说起的 UI 阻塞。
看下面的代码:web

// ajax 为一个库提供的任意 ajax 函数
var response = ajax('https://example.com/api');
console.log(response);
// `response` 将不会有数据返回
复制代码

可能你已经知道标准的 ajax 请求不会彻底同步执行完毕，意即在代码运行阶段，ajax(..) 函数不会返回任何值给 response 变量ajax

得到异步函数返回值的一个简单方法是使用回调函数。算法

ajax('https://example.com/api', function(response) {
    console.log(response); // `response` 如今有值
});
复制代码

只是要注意一点：即便能够也永远不要发起同步 ajax 请求。若是发起同步 ajax 请求，JavaScript 程序的 UI 将会被阻塞－用户不可以点击，输入数据，跳转或者滚动。任何用户交互都会被阻塞。这是很是糟糕。编程

如下示例代码，但请别这样作，这会毁掉网页：api

// 假设你使用 jQuery
jQuery.ajax({
    url: 'https://api.example.com/endpoint',
    success: function(response) {
        // 成功回调.
    },
    async: false // 同步
});
复制代码

咱们以 Ajax 请求为例。你能够异步执行任意代码。数组

你可使用 setTimeout(callback, milliseconds) 函数来异步执行代码。setTimeout 函数会在以后的某个时刻触发事件(定时器)。以下代码：

function first() {
    console.log('first');
}
function second() {
    console.log('second');
}
function third() {
    console.log('third');
}
first();
setTimeout(second, 1000); // 1 秒后调用 second 函数
third();
复制代码

控制台输出以下：

first
third
second
复制代码

剖析事件循环

咱们这儿从一个奇怪的声明开始——尽管容许异步 JavaScript 代码(就像上例讨论的setTimeout)，但在ES6以前，JavaScript自己实际上历来没有任何内置异步的概念，JavaScript引擎在任何给定时刻只执行一个块。

对于更多的JavaScript引擎怎么工做的，能够看系列文章的第一篇

那么，是谁告诉JS引擎执行程序的代码块呢?实际上，JS引擎并非单独运行的——它是在一个宿主环境中运行的，对于大多数开发人员来讲，宿主环境就是典型的web浏览器或Node.js。实际上，如今JavaScript被嵌入到各类各样的设备中，从机器人到灯泡，每一个设备表明 JS 引擎的不一样类型的托管环境。

全部环境中的共同点是一个称为事件循环的内置机制，它每次调用JS引擎时都会处理程序的多个块的执行。

这意味着JS引擎只是任意JS代码的按需执行环境，是宿主环境处理事件运行及结果。

例如，当 JavaScript 程序发出 Ajax 请求从服务器获取一些数据时，在函数(“回调”)中设置“response”代码，JS引擎告诉宿主环境:"我如今要推迟执行，但当完成那个网络请求时，会返回一些数据，请回调这个函数并给数据传给它"。

而后浏览器将侦听来自网络的响应，当监听到网络请求返回内容时，浏览器经过将回调函数插入事件循环来调度要执行的回调函数。如下是示意图：

您能够在咱们以前的文章中阅读有关内存堆和调用堆栈的更多信息。

这些Web api是什么?从本质上说，它们是没法访问的线程，只能调用它们。它们是浏览器的并发部分。若是你是一个Node.js开发者，这些就是 c++ 的 Api。

那么事件循环到底是什么呢？

事件循环有一个简单的工做——监视调用堆栈和回调队列。若是调用堆栈为空，它将从队列中获取第一个事件，并将其推送到调用堆栈，这将有效地运行它。

这样的迭代在事件循环中称为 (tick标记)，每一个事件只是一个函数回调。

console.log('Hi');
setTimeout(function cb1() { 
    console.log('cb1');
}, 5000);
console.log('Bye');
复制代码

让咱们执行这份代码看看发生了什么：

1.初始状态都为空，浏览器console面板为空，调用堆栈为空。

2.`console.log('Hi')`被添加到调用堆栈中。

3.`console.log(Hi)`被执行。

4.`console.log('Hi')`从调用堆栈中移除。

5.`setTimeout(function cb1() { ... })`被添加到调用堆栈当中

6.`setTimeout(function cb1() { ... })`被执行，浏览器经过它的Web APIS建立了一个计时器,为你的代码计时。

7.这个`setTimeout(function cb1() { ... })`调用计时器它自己的函数是已经执行完成，从调用堆栈中移除。

8.`console.log('Bye')`被添加到调用堆栈中。

9.`console.log('Bye')`被执行。

10.`console.log('Bye')`从调用堆栈中移除。

11.在至少5000ms后，定时器执行完成后，把`cb1`回调函数添加到回调队列里面。

12.事件循环把`cb1`从回调队列中取出，添加到调用堆栈中。

13.`cb1`被执行，把`console.log('cb1')`添加调用堆栈中。

14.`console.log('cb1')` 被执行。

15.`console.log('cb1')`从调用堆栈中移除。

16.`cb1`从调用堆栈中移除。

总体过程回顾：

比较值得注意的是，ES6指定了事件循环应该怎么运行。这意味着在技术范围内，他是属于JS引擎的职责范围内,再也不仅仅扮演宿主环境的角色。这种变化的一个主要缘由是ES6中引入了Promises，由于后者须要对事件循环队列上的调度操做更直接，控制更细粒度（稍后咱们将更详细地讨论它们）

setTimeout(...)怎么工做的

须要注意的是，setTimeout(…)不会自动将回调放到事件循环队列中。它设置了一个计时器。当计时器过时时，环境将回调放到回调中，以便未来某个标记(tick)将接收并执行它。请看下面的代码:

setTimeout(myCallback, 1000);
复制代码

这不是意味着myCallback将在1000ms后执行，而是在1000ms后myCallback将被添加到回调队列里面去，这个队列可能也有其余比较早被添加的事件正在等待，这个时候，你的回调就必需要等待。

有很多文章和教程说在JavaScript中开始使用异步编程的时候，都建议使用setTimeout(callback,0)，那么如今你知道了事件循环的机制和setTimeout怎么运行的，调用setTimeout 0毫秒做为第二个参数只是推迟回调将它放到回调队列中，直到调用堆栈是空的。

看下下面的代码：

console.log('Hi');
setTimeout(function() {
    console.log('callback');
}, 0);
console.log('Bye');
复制代码

尽管等待时间设置成了0ms，这个浏览器打印的结果以下：

Hi
Bye
callback
复制代码

ES6中的任务队列是什么?

在ES6的介绍中有一个新的叫作“任务队列”的概念，它是事件循环队列上面的一层，最多见的是在promise处理异步方式的时候。如今只讨论这个概念，以便在讨论带有Promises的异步行为时，可以了解 Promises 是如何调度和处理。

想象一下：这个任务队列是附加到事件循环队列中每一个标记（一次从回调队里里面取到数据后，放到调用堆栈执行的过程）末尾的队列，某些异步操做可能发生在事件循环的一个标记期间，不会致使一个全新的事件被添加到事件循环队列中，而是将一个项目(即任务)添加到当前标记的任务队列的末尾。

这意味着能够放心添加另外一个功能以便稍后执行，它将在其余任何事情以前当即执行。

一个任务还可能建立更多任务添加到同一队列的末尾。理论上，任务“循环”(不断添加其余任务的任等等)能够无限运行，从而使程序没法得到转移到下一个事件循环标记的必要资源。从概念上讲，这相似于在代码中表示长时间运行或无限循环(如while (true) ..)。

任务有点像 setTimeout(callback, 0) “hack”，但其实现方式是引入一个定义更明确、更有保证的顺序：稍后执行，但越快越好。

回调

正如你已经知道的，回调是到目前为止JavaScript程序中表达和管理异步最多见的方法。实际上，回调是JavaScript语言中最基本的异步模式。无数的JS程序，甚至是很是复杂的程序，除了一些基本都是在回调异步基础上编写的。
可是回调函数仍是有一些缺点，开发者们试图探索更好的异步模式。可是，若是不了解底层的过程，就不可能有效地使用任何抽象出来的异步模式。
在下一章中，咱们将深刻探讨这些抽象，以说明为何更复杂的异步模式(将在后续文章中讨论)是必要的，甚至是值得推荐的。

嵌套回调

看下下面的代码：

listen('click', function (e){
    setTimeout(function(){
        ajax('https://api.example.com/endpoint', function (text){
            if (text == "hello") {
            doSomething();
        }
        else if (text == "world") {
            doSomethingElse();
            }
        });
    }, 500);
});
复制代码

咱们组成了三个函数内嵌到一块儿的链式嵌套，每个函数表明在异步系列里面的一步。
这种代码一般被称为“回调地狱”。可是“回调地狱”实际上与嵌套/缩进几乎没有任何关系，这是一个更深层次的问题。
首先，咱们等待“单击”事件，而后等待计时器触发，而后等待Ajax响应返回，此时可能会再次重复全部操做。
乍一看，这段代码彷佛能够将其异步过程对应到如下多个函数顺序执行的步骤:

listen('click', function (e) {
	// ..
});
复制代码

而后：

setTimeout(function(){
    // ..
}, 500);
复制代码

再而后：

ajax('https://api.example.com/endpoint', function (text){
    // ..
});
复制代码

最后：

if (text == "hello") {
    doSomething();
}
else if (text == "world") {
    doSomethingElse();
}
复制代码

因此这种同步的方式去表达你的异步嵌套代码，是否是更天然一些？必定有这样的方法，对吧？

Promise

看下下面的代码：

var x = 1;
var y = 2;
console.log(x + y);
复制代码

很是的直观，这个x和y相加之和经过console.log打印出来。若是，x和y的值尚未赋上，仍然须要求值，怎么办？
例如，须要从服务器取回x和y的值，而后才能在表达式中使用它们。假设咱们有一个函数loadX和loadY，它们分别从服务器加载x和yy的值。而后，一旦x和y都被加载，咱们有一个函数sum，它对x和y的值进行求和。它多是这样的：

function sum(getX, getY, callback) {
    var x, y;
    getX(function(result) {
        x = result;
        if (y !== undefined) {
            callback(x + y);
        }
    });
    getY(function(result) {
        y = result;
        if (x !== undefined) {
            callback(x + y);
        }
    });
}
// A sync or async function that retrieves the value of `x`
//获取到x值得方法
function fetchX() {
    // ..
}


// A sync or async function that retrieves the value of `y`
//获取到y值得方法
function fetchY() {
    // ..
}

//调用
sum(fetchX, fetchY, function(result) {
    console.log(result);
});
复制代码

这段代码中有一些很是重要的东西，咱们将x和y做为异步获取的值，而且执行了一个函数sum(…)(从外部)，它不关心x或y，也不关心它们是否当即可用。

固然，这种基于回调的粗略方法还有不少不足之处。这只是一个咱们没必要判断对于异步请求的值的处理方式一个小步骤而已。

Promise Value

简单的看一下，咱们怎么用promise表达x+y：

function sum(xPromise, yPromise) {

	// `Promise.all([ .. ])` takes an array of promises,
	// and returns a new promise that waits on them
	// all to finish
	//`Promise.all([ .. ])` 传入一个promise数组，
	//经过返回一个新的promise，这个promise将等待全部的返回
	return Promise.all([xPromise, yPromise])

	// when that promise is resolved, let's take the
	// received `X` and `Y` values and add them together.
	//当promise是被resolved了，就返回这个x和y的值，执行加法
	.then(function(values){
		// `values` is an array of the messages from the
		// previously resolved promises
		//`values` 是上一个promise.all执行结果的数组
		return values[0] + values[1];
	} );
}

// `fetchX()` and `fetchY()` return promises for
// their respective values, which may be ready
// *now* or *later*.
//`fetchX()` 和 `fetchY()`返回各自的promise
sum(fetchX(), fetchY())

// we get a promise back for the sum of those
// two numbers.
// now we chain-call `then(...)` to wait for the
// resolution of that returned promise.
//咱们获得两个promise之和的值，等待这个promise执行成功
.then(function(sum){
    console.log(sum);
});
复制代码

在这个代码中有两层promise。
fetchX() 和 fetchY() 直接被调用,他们返回的值（promise）传入到了sum(...)。这个promise所表明的基础值不管是如今或者未来均可以准备就绪。但每一个promise都会将其行为规范化，咱们以与时间无关的方式推理x和y的值。某一段时间内，他们是一个未来的值。

这第二层promise是sum(...)创造的（经过 Promise.all([ ... ])），而后返回promise。经过调用then(…)来等待。当 sum(…) 操做完成时，sum 传入的两个 Promise 都执行完后，能够打印出来了。这里隐藏了在sum(…)中等待x和y将来值的逻辑。

注意： 在这个sum(...)里面，这个Promise.all([...])调用建立一个 promise（等待 promiseX 和 promiseY 它们resolve）。而后链式调用 .then(...)方法里再的建立了另外一个 Promise，而后把(values[0] + values[1]) 进行求和并返回。

所以，咱们在sum（...）末尾调用then（...）方法——其实是在返回的第二个 Promise 上的运行，而不是由Promise.all([ ... ])建立的Promise。此外，虽然没有在第二个 Promise 结束时再调用 then方法，其时这里也建立一个 Promise。

Promise.then(…) 实际上可使用两个函数，第一个函数用于执行成功的操做，第二个函数用于处理失败的操做：
若是在获取x或y时出现错误，或者在添加过程当中出现某种失败，sum(…) 返回的 Promise将被拒绝，传递给then(…)的第二个回调错误处理程序将从 Promise 接收失败的信息。

从外部看，因为 Promise 封装了依赖于时间的状态（等待底层值的完成或拒绝，Promise 自己是与时间无关的），它能够按照可预测的方式组成，不须要开发者关心时序或底层的结果。 Promise一旦resolve，此刻在外部他就成了不可变的值——而后就能够根据需求屡次观察。

链式调用对于你来讲是真的有用：

function delay(time) {
    return new Promise(function(resolve, reject){
        setTimeout(resolve, time);
    });
}

delay(1000)
.then(function(){
    console.log("after 1000ms");
    return delay(2000);
})
.then(function(){
    console.log("after another 2000ms");
})
.then(function(){
    console.log("step 4 (next Job)");
    return delay(5000);
})
复制代码

调用delay(2000)建立一个2000ms后将被实现（fulfill）的promise，而后经过第一个then(...)来接收回调信号，在这里面也返回一个promise，经过第二个then(...)的promise来等待2000ms的promise。

注意： 由于一个Promise一旦被resolved，在外面看来就成了不可变了，因此如今能够把它安全的传递到程序的任何地方。由于它不能被意外地或恶意地修改，这一点在多个地方观察一个promise时尤为正确。一方不可能影响另外一方观察promise结果的能力，不变性听起来像是一个学术话题，但它其实是promise设计最基本和最重要的方面之一，不该该被随意忽略。

用不用Promise

关于 Promise 的一个重要细节是要肯定某个值是不是一个实际的Promise。换句话说，它是否具备像Promise同样行为？

咱们知道 Promise 是由new Promise(…)语法构造的，你可能认为p instanceof Promise是一个足够能够判断的类型，嗯,不彻底是!

这主要是由于能够从另外一个浏览器窗口(例如iframe)接收Promise值，而该窗口或框架具备本身的Promise值，与当前窗口或框架中的Promise 值不一样，因此该检查将没法识别 Promise 实例。

此外，库或框架能够选择性的封装本身的Promise，而不使用原生 ES6 的Promise 来实现。事实上，极可能在老浏览器的库中没有 Promise。

捕获错误和异常

若是在 Promise 建立中，出现了一个javascript异常错误(TypeError或者ReferenceError)，这个异常会被捕捉，而且使这个 promise 被拒绝。
好比：

var p = new Promise(function(resolve, reject){
    foo.bar();	  // `foo` is not defined, so error!'foo'没有定义
    resolve(374); // never gets here :( 不会到达这儿
});

p.then(
    function fulfilled(){
        // never gets here :(不会到达这儿
    },
    function rejected(err){
        // `err` will be a `TypeError` exception object
	// from the `foo.bar()` line.
    }
);
复制代码

可是，若是在调用 then(…)方法中出现了JS异常错误，那么会发生什么状况呢?即便它不会丢失，你可能会发现它们的处理方式有点使人吃惊，直到你挖得更深一点:

var p = new Promise( function(resolve,reject){
	resolve(374);
});

p.then(function fulfilled(message){
    foo.bar();
    console.log(message);   // never reached不会到达这儿
},
    function rejected(err){
        // never reached 不会到达这儿
    }
);
复制代码

看起来foo.bar()中的异常确实被吞噬了，不过,它不是。然而，还有一些更深层次的问题，咱们没有注意到。 p.then(…) 调用自己返回另外一个 Promise，该 Promise 将被 TypeError 异常拒绝。

处理未捕获异常

许多人会说，还有其余更好的方法。

一个常见的建议是，Promise 应该添加一个 done(…)，这其实是将 Promise 链标记为 “done”。done(…)不会建立并返回 Promise ，所以传递给 done(..) 的回调显然不会将问题报告给不存在的连接 Promise 。

Promise 对象的回调链，无论以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能没法捕捉到（由于Promise内部的错误不会冒泡到全局）。所以，咱们能够提供一个 done 方法，老是处于回调链的尾端，保证抛出任何可能出现的错误。

var p = Promise.resolve(374);

p.then(function fulfilled(msg){
    // numbers don't have string functions,
    // so will throw an error
    console.log(msg.toLowerCase());
})
.done(null, function() {
    // If an exception is caused here, it will be thrown globally 
});
复制代码

ES8中有什么变化 ?Async/await （异步/等待）

JavaScript ES8引入了async/await，这使得使用Promise的工做更容易。这里将简要介绍async/await 提供的可能性以及如何利用它们编写异步代码。

使用 async 声明异步函数。这个函数返回一个AsyncFunction 对象。AsyncFunction 对象表示该函数中包含的代码是异步函数。

调用使用 async 声明函数时，它返回一个Promise。当这个函数返回一个值时，这个值只是一个普通值而已，这个函数内部将自动建立一个promise，并使用函数返回的值进行解析。当这个函数抛出异常时，Promise 将被抛出的值拒绝。

使用 async 声明函数时能够包含一个await符号，await暂停这个函数的执行并等待传递的 Promise 的解析完成，而后恢复这个函数的执行并返回解析后的值。

async/wait 的目的是简化使用promise的行为

看下下面的列子：

// Just a standard JavaScript function
//标准的js写法
function getNumber1() {
    return Promise.resolve('374');
}
// This function does the same as getNumber1
//这个函数作了相同的事情，返回一个promise
async function getNumber2() {
    return 374;
}
复制代码

相似地,函数抛出异常至关于函数返回的promise被reject了:

//这两个函数同样
function f1() {
    return Promise.reject('Some error');
}
async function f2() {
    throw 'Some error';
}
复制代码

await关键词只能使用在async函数中，容许去同步等待一个promise执行。若是在async外面使用promise，仍然须要使用then回调。

async function loadData() {
    // `rp` is a request-promise function.
    //`rp` 是一个请求promise函数
    var promise1 = rp('https://api.example.com/endpoint1');
    var promise2 = rp('https://api.example.com/endpoint2');
   
    // Currently, both requests are fired, concurrently and
    // now we'll have to wait for them to finish
    //如今，两个请求都被执行，必须等到他们执行完成
    var response1 = await promise1;
    var response2 = await promise2;
    return response1 + ' ' + response2;
}
// Since, we're not in an `async function` anymore
// we have to use `then`.
//因为再也不异步函数当中，咱们必须使用`then`
loadData().then(() => console.log('Done'));
复制代码

还可使用“异步函数表达式”定义异步函数。异步函数表达式与异步函数语句很是类似，语法也几乎相同。异步函数表达式和异步函数语句之间的主要区别是函数名，能够在异步函数表达式中省略函数名来建立匿名函数。异步函数表达式能够用做声明(当即调用的函数表达式)，一旦定义它就会运行。

就像这样：

var loadData = async function() {
    // `rp` is a request-promise function.
    var promise1 = rp('https://api.example.com/endpoint1');
    var promise2 = rp('https://api.example.com/endpoint2');
   
    // Currently, both requests are fired, concurrently and
    // now we'll have to wait for them to finish
    var response1 = await promise1;
    var response2 = await promise2;
    return response1 + ' ' + response2;
}
复制代码

更重要的是，在全部主流的浏览器都支持 async/await:

最后，重要的是不要盲目选择编写异步代码的“最新”方法。理解异步 JavaScript 的内部结构很是重要，了解为何异步JavaScript如此关键，并深刻理解所选择的方法的内部结构。与编程中的其余方法同样，每种方法都有优势和缺点。

编写高度可维护、稳定的异步代码

1.简化代码

使用 async/await 能够编写更少的代码。每次使用async/await时，都会跳过一些没必要·要的步骤：使用.then，建立一个匿名函数来处理响应：

// `rp` is a request-promise function.
rp('https://api.example.com/endpoint1').then(function(data) {
 // …
});
复制代码

与：

// `rp` is a request-promise function.
var response = await rp(‘https://api.example.com/endpoint1');
复制代码

2.错误处理

Async/wait 可使用相同的代码结构(众所周知的try/catch语句)处理同步和异步错误。看看它是如何与 Promise 结合的：

function loadData() {
    try { // Catches synchronous errors.
        getJSON().then(function(response) {
            var parsed = JSON.parse(response);
            console.log(parsed);
        }).catch(function(e) { // Catches asynchronous errors
            console.log(e); 
        });
    } catch(e) {
        console.log(e);
    }
}
view raw
复制代码

与：

async function loadData() {
    try {
        var data = JSON.parse(await getJSON());
        console.log(data);
    } catch(e) {
        console.log(e);
    }
}
复制代码

3.条件处理

用async/ wait编写条件代码要简单得多:

function loadData() {
  return getJSON()
    .then(function(response) {
      if (response.needsAnotherRequest) {
        return makeAnotherRequest(response)
          .then(function(anotherResponse) {
            console.log(anotherResponse)
            return anotherResponse
          })
      } else {
        console.log(response)
        return response
      }
    })
}
复制代码

与：

async function loadData() {
  var response = await getJSON();
  if (response.needsAnotherRequest) {
    var anotherResponse = await makeAnotherRequest(response);
    console.log(anotherResponse)
    return anotherResponse
  } else {
    console.log(response);
    return response;    
  }
}
复制代码

4.错误堆栈

与 async/await不一样，从 Promise 链返回的错误堆栈不提供错误发生在哪里。看看下面这些:

function loadData() {
  return callAPromise()
    .then(callback1)
    .then(callback2)
    .then(callback3)
    .then(() => {
      throw new Error("boom");
    })
}
loadData()
  .catch(function(e) {
    console.log(err);
// Error: boom at callAPromise.then.then.then.then (index.js:8:13)
});
复制代码

与：

async function loadData() {
  await callAPromise1()
  await callAPromise2()
  await callAPromise3()
  await callAPromise4()
  await callAPromise5()
  throw new Error("boom");
}
loadData()
  .catch(function(e) {
    console.log(err);
    // output
    // Error: boom at loadData (index.js:7:9)
});
复制代码

5.调试

若是你使用过 Promise，那么你知道调试它们是一场噩梦。例如，若是在一个程序中设置了一个断点，而后阻塞并使用调试快捷方式(如“中止”)，调试器将不会移动到下面，由于它只“逐步”执行同步代码。使用async/wait，您能够逐步完成wait调用，就像它们是正常的同步函数同样。

后续文档翻译会陆续跟进！！

欢迎关注玄说前端公众号：

【译】JavaScript的工做原理：事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

为何单线程有局限性？

Javascript程序的构建模块

剖析事件循环

1.初始状态都为空，浏览器console面板为空，调用堆栈为空。

2.console.log('Hi')被添加到调用堆栈中。

3.console.log(Hi)被执行。

4.console.log('Hi')从调用堆栈中移除。

5.setTimeout(function cb1() { ... })被添加到调用堆栈当中

6.setTimeout(function cb1() { ... })被执行，浏览器经过它的Web APIS建立了一个计时器,为你的代码计时。

7.这个setTimeout(function cb1() { ... })调用计时器它自己的函数是已经执行完成，从调用堆栈中移除。

8.console.log('Bye')被添加到调用堆栈中。

9.console.log('Bye')被执行。

10.console.log('Bye')从调用堆栈中移除。

11.在至少5000ms后，定时器执行完成后，把cb1回调函数添加到回调队列里面。

12.事件循环把cb1从回调队列中取出，添加到调用堆栈中。

13.cb1被执行，把console.log('cb1')添加调用堆栈中。

14.console.log('cb1') 被执行。

15.console.log('cb1')从调用堆栈中移除。

16.cb1从调用堆栈中移除。

setTimeout(...)怎么工做的

ES6中的任务队列是什么?

回调

嵌套回调

Promise

Promise Value

用不用Promise

捕获错误和异常

处理未捕获异常

ES8中有什么变化 ?Async/await （异步/等待）

编写高度可维护、稳定的异步代码

1.简化代码

2.错误处理

3.条件处理

4.错误堆栈

5.调试

2.`console.log('Hi')`被添加到调用堆栈中。

3.`console.log(Hi)`被执行。

4.`console.log('Hi')`从调用堆栈中移除。

5.`setTimeout(function cb1() { ... })`被添加到调用堆栈当中

6.`setTimeout(function cb1() { ... })`被执行，浏览器经过它的Web APIS建立了一个计时器,为你的代码计时。

7.这个`setTimeout(function cb1() { ... })`调用计时器它自己的函数是已经执行完成，从调用堆栈中移除。

8.`console.log('Bye')`被添加到调用堆栈中。

9.`console.log('Bye')`被执行。

10.`console.log('Bye')`从调用堆栈中移除。

11.在至少5000ms后，定时器执行完成后，把`cb1`回调函数添加到回调队列里面。

12.事件循环把`cb1`从回调队列中取出，添加到调用堆栈中。

13.`cb1`被执行，把`console.log('cb1')`添加调用堆栈中。

14.`console.log('cb1')` 被执行。

15.`console.log('cb1')`从调用堆栈中移除。

16.`cb1`从调用堆栈中移除。