导读：本文主要参考了这里，https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing
做了个搬运工，查看原文请点击上方连接
一、异步编程
1、异步
通常，给定程序的代码直接运行，一次只发生一件事。如果一个函数依赖于另一个函数的结果，则它必须等待另一个函数完成并返回，直到这种情况发生为止，从用户的角度来看，整个程序实际上都已停止。
这是一个令人沮丧的经历，并且不能很好地利用计算机的处理能力，尤其是在计算机具有多个可用处理器核心的时代。当您可以让其他任务在另一个处理器内核上运行并让您知道何时完成时，坐在那里等待某事毫无意义。这使您可以同时完成其他工作，这是异步编程的基础。
2、阻塞
当Web应用程序在浏览器中运行并且执行大量代码而不将控制权交还给浏览器时，浏览器可能似乎被冻结。这称为阻塞；浏览器被阻止继续处理用户输入和执行其他任务，直到Web应用返回处理器的控制权为止。
阻塞示例：
在我们的simple-sync.html示例中（看到它实时运行），我们将click事件监听器添加到按钮上，以便在单击按钮时运行一个耗时的操作（计算1000万个日期，然后将最后一个记录到控制台）然后将一段添加到DOM：
在运行示例时，打开JavaScript控制台，然后单击按钮-您会注意到，只有在日期计算完成并记录了控制台消息之后，该段落才会出现。代码按照其在源代码中出现的顺序运行，并且直到较早的操作完成运行之后，才会运行较后的操作。
二、异步JavaScript
1、同步JavaScript
为了让我们了解异步JavaScript是什么，我们应该首先确保我们了解同步JavaScript是什么。
在此块中，各行依次执行：
我们获取<button>对DOM中已经可用的元素的引用。
我们向其添加click事件监听器，以便在单击按钮时：
alert()出现一条信息。
解除警报后，我们将创建一个<p>元素。
然后，我们给它一些文本内容。
最后，我们将该段落附加到文档正文中。
JavaScript是单线程的，一次只能在一个主线程上发生一件事情，其他所有事情都将被阻塞，直到操作完成。
同步代码存在的问题：
让我们看一个简单的例子。从服务器获取图像时，无法立即返回结果。这意味着以下（伪代码）将不起作用：
那是因为您不知道下载映像将花费多长时间，因此，当您运行第二行时，由于response尚不可用，它将抛出错误（可能是间歇性的，可能是每次）。相反，您需要代码等待response返回之前，尝试对其执行其他任何操作。
2、异步回调
异步回调是在调用将在后台开始执行代码的函数时指定为参数的函数。当后台代码完成运行时，它将调用回调函数以使您知道工作已完成，或者使您知道发生了一些有趣的事情。现在，使用回调有点过时，但您仍会在许多较旧但仍常用的API中看到它们的使用。
异步回调的第一个示例：
第一个参数是要侦听的事件的类型，第二个参数是在触发事件时调用的回调函数。
当我们将回调函数作为参数传递给另一个函数时，我们只是将函数的引用作为参数传递，即，回调函数不会立即执行。它在包含函数的主体内部某处被异步地称为“ back”（因此得名）。时间到时，包含函数负责执行回调函数
第二个示例：
在这里，我们创建了一个displayImage()函数，该函数简单地表示作为对象URL传递给它的Blob，然后创建一个图像以显示URL，并将其附加到文档的<body>。但是，我们然后创建一个loadAsset()函数，该函数将回调作为参数，以及要获取的URL和内容类型。它使用XMLHttpRequest（通常缩写为“ XHR”）来获取给定URL的资源，然后再将响应传递给回调以执行某些操作。在这种情况下，回调将等待XHR调用完成下载（使用onload事件处理程序），然后再将其传递给回调。
请注意，并非所有的回调都是异步的，有些是同步运行的。
三、Promise
Promise是新样式的异步代码，您将在现代Web API中看到它们。fetch()API 是一个很好的例子，该API基本上类似于的现代，更高效的版本XMLHttpRequest。让我们看一个简单的例子，来自我们从服务器获取数据一文：
在这里，我们看到fetch()一个参数-您要从网络中获取资源的URL-并返回一个promise。promise是一个对象，代表异步操作的完成或失败。它代表着一种中间状态。本质上，这是浏览器说“我保证会尽快答复您”的方式，因此命名为“Promise”。
这个概念可以通过实践来适应，尚未发生任何可能的结果，因此，获取操作当前正在等待浏览器尝试在将来某个时候完成该操作的结果。
然后，我们将另外三个代码块链接到的末尾fetch()：
两个then()。两者都包含一个回调函数，如果先前的操作成功完成，则该函数将运行，并且每个回调都将先前成 功的操作的结果作为输入接收，因此您可以继续进行其他操作。每个.then()块都返回另一个promise，这意味着您可以将多个.then()块彼此链接，因此可以使多个异步操作依次运行。
catch()。如果任何.then()块发生故障，最后的块都会运行-与同步try...catch块类似，在内将提供一个错误对象，该错误对象catch()可用于报告发生的错误类型。
promise与回调的区别
承诺与旧式回调有一些相似之处。它们本质上是一个返回对象，您可以在其中附加回调函数，而不必将回调传递给函数。
但是，promise是专门用于处理异步操作的，与旧式回调相比，它们具有许多优点：
您可以使用多个.then()操作将多个异步操作链接在一起，将一个操作的结果作为输入传递给下一个操作。这对于回调来说要困难得多，而回调通常会导致混乱的“厄运金字塔”（也称为回调地狱）。
始终以严格的顺序调用Promise回调，将它们放置在事件队列中。
错误处理要好得多-所有错误都由.catch()块末尾的单个块处理，而不是在“金字塔”的每个级别中单独处理。
与老式的回调不同，Promise避免控件的反转，后者在将回调传递给第三方库时完全无法控制函数的执行方式。
