1. 异步JavaScript
在 JS 中，经常要处理一些异步回调，比如从网络获取文件，访问数据库，从网络摄像头获得视频流；
例如下面的代码，因为从服务器上获取一个图像需要时间，下面的代码可能不能正常工作；
var response = fetch('myImage.png');
var blob = response.blob();
// display your image blob in the UI somehow
那么如何解决这类问题呢？方法有很多：可分为异步callbacks（回调函数）和 其他方法（promise、async\await、generator）。下面一一介绍
2. 异步callbacks
以使用 XMLHttpRequest API 为例：
function loadAsset(url, type, callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = type;
xhr.onload = function() {
callback(xhr.response); //把响应作为参数传递给回调函数去处理
};
xhr.send();
}
function displayImage(blob) {
let objectURL = URL.createObjectURL(blob);
let image = document.createElement('img');
image.src = objectURL;
document.body.appendChild(image);
}
loadAsset('coffee.jpg', 'blob', displayImage);
这里我们在loadAsset函数中发出网络请求，但注意我们向loadAsset函数中传入了一个 回调函数（displayImage）; 当浏览器收到服务器返回来的数据时，会触发onload事件，并把响应作为参数传递给回调函数去处理。
这样，我们就解决了之前的问题：还未收到响应数据就执行处理函数。
3. Promise
Promise 是专门为处理异步逻辑而设计的，它让异步回调过程更加清晰。让我们看看上面的代码使用Promise改写是怎样的：
function loadAsset(url, type) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = type;
xhr.onload = function() {
resolve(xhr.response); //返回收到的响应数据
};
xhr.send();
});
}
function displayImage(blob) {
let objectURL = URL.createObjectURL(blob);
let image = document.createElement("img");
image.src = objectURL;
document.body.appendChild(image);
}
//不再需要传入回调函数
loadAsset("coffee.jpg", "blob").then(data => {
displayImage(data);
});
比较后我们会发现，这里不再需要给 loadAsset传入回调函数，Promise帮我们处理了这个逻辑，在收到响应后，由于我们使用了resolve返回响应数据，我们直接在then方法中就能拿到我们要的数据了！
虽然代码看起来多了一点，但是逻辑看起来却更清楚了，特别是遇到 回调函数嵌套 的问题。这就是使用Promise的好处。
4. 生成器(Generator)
让我们看一下 Generator 的示例：
function* say(){
yield "开始";
yield "执行中";
yield "结束";
}
let it = say(); // 调用say方法，得到一个迭代器
console.log(it.next()); // { value: '开始', done: false }
console.log(it.next()); // { value: '执行中', done: false }
console.log(it.next()); // { value: '结束', done: false }
console.log(it.next()); // { value: undefined, done: true }
生成器函数定义时在function关键字后面多加一个*号。它和普通函数不同，普通函数一次执行完所有代码，但它可以通过yield关键字将函数的执行挂起，再外部在通过调用next方法，让函数继续执行，直到遇到下一个yield，或函数执行完毕。
这样，异步操作也可以变得和同步操作一样。
5. async/await
async/await 是常用的处理异步逻辑的方法，它其实就是生成器的语法糖。
async function getData(){
var response = await fetch('myImage.png');
var blob = response.blob();
}
在异步处理前加 await ，这样函数将等待异步流程结束后才执行之后的代码。
