你可能知道靠闭，Javascript語言的執(zhí)行環(huán)境是"單線程"（single thread）。
所謂"單線程"坎炼，就是指一次只能完成一件任務(wù)愧膀。如果有多個任務(wù)，就必須排隊谣光，前面一個任務(wù)完成檩淋，再執(zhí)行后面一個任務(wù)，以此類推抢肛。
這種模式的好處是實現(xiàn)起來比較簡單狼钮，執(zhí)行環(huán)境相對單純；壞處是只要有一個任務(wù)耗時很長捡絮，后面的任務(wù)都必須排隊等著熬芜，會拖延整個程序的執(zhí)行。常見的瀏覽器無響應(yīng)（假死）福稳，往往就是因為某一段Javascript代碼長時間運行（比如死循環(huán)）涎拉，導(dǎo)致整個頁面卡在這個地方，其他任務(wù)無法執(zhí)行的圆。
為了解決這個問題鼓拧，Javascript語言將任務(wù)的執(zhí)行模式分成兩種：同步（Synchronous）和異步（Asynchronous）。
1.回調(diào)
回調(diào)是異步編程最基本的方法越妈。
假定有兩個函數(shù)f1和f2季俩，后者等待前者的執(zhí)行結(jié)果。
f1();
f2();
如果f1是一個很耗時的任務(wù)梅掠，可以考慮改寫f1酌住，把f2寫成f1的回調(diào)函數(shù)店归。
function f1(callback){
setTimeout(function () {
// f1的任務(wù)代碼
callback();
}, 1000);
}
執(zhí)行代碼就變成下面這樣
f1(f2);
采用這種方式，我們把同步操作變成了異步操作酪我，f1不會堵塞程序運行消痛，相當(dāng)于先執(zhí)行程序的主要邏輯，將耗時的操作推遲執(zhí)行都哭≈壬。回調(diào)函數(shù)的優(yōu)點是簡單、容易理解和部署欺矫，缺點是不利于代碼的閱讀和維護纱新，各個部分之間高度耦合，流程會很混亂汇陆，而且每個任務(wù)只能指定一個回調(diào)函數(shù)怒炸。
2.Promise
Promises對象是CommonJS工作組提出的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口毡代。
簡單說阅羹，它的思想是，每一個異步任務(wù)返回一個Promise對象教寂，該對象有一個then方法捏鱼，允許指定回調(diào)函數(shù)。Promises的出現(xiàn)大大改善了異步變成的困境酪耕，避免出現(xiàn)回調(diào)地獄导梆，嵌套層級得到改善。
基本Api
Promise.resolve()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all() // 所有的完成
Promise.race() // 競速迂烁，完成一個即可
具體api的介紹請看 阮一峰 大神的 ECMAScript 6 入門
在這我舉幾個簡單的場景的實現(xiàn)
模擬兩個異步請求
為了使代碼簡介看尼，Promise的rejected狀態(tài)的相關(guān)reject()和catch()方法省略
// 1請求
function getData1 () {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('1執(zhí)行了')
resolve('請求到模擬數(shù)據(jù)1111拉')
}, 2000)
})
}
// 2請求
function getData2 (params) {
return new Promise(function (resolve, reject) {
setTimeout(() => {
console.log('2執(zhí)行了')
resolve('請求到模擬數(shù)據(jù)22222拉！params：' + params)
}, 1500)
})
}
promise 實現(xiàn)異步回調(diào) 異步列隊
1請求完成后盟步，把1的響應(yīng)參數(shù)傳入2藏斩，在發(fā)2請求
function promiseDemo () {
getData1()
.then(res => {
return getData2(res)
})
.then(res => {
console.log(res)
})
}
promiseDemo()
// 1執(zhí)行了
// 2執(zhí)行了
// 請求到模擬數(shù)據(jù)22222拉！params：請求到模擬數(shù)據(jù)1111拉 用時 3500 ms
promise.all() 實現(xiàn)異步回調(diào) 并發(fā) 所有的完成
1請求却盘、2請求同時發(fā),兩條響應(yīng)都收到后再執(zhí)行
function promiseDemo () {
Promise.all([getData1(), getData2()]).then(function (res) {
console.log(res)
})
}
// 2執(zhí)行了
// 1執(zhí)行了
// ["請求到模擬數(shù)據(jù)1111拉", "請求到模擬數(shù)據(jù)22222拉狰域！params：undefined"] 用時 2000 ms
promise.race() 實現(xiàn)異步回調(diào) 并發(fā) 競速
1請求、2請求同時發(fā)黄橘，其中一條收到請求就執(zhí)行
function promiseDemo () {
Promise.race([getData1(), getData2()]).then(function (res) {
console.log(res)
})
}
// 2執(zhí)行了
// 請求到模擬數(shù)據(jù)22222拉兆览！params：undefined 用時 1500 ms
// 1執(zhí)行了
由此Promise對象還是很好用的，對于異步的流程的控制得到了大大改善塞关，通過
.then()的方法可進行鏈?zhǔn)秸{(diào)用抬探。可是.then().catch()使用也導(dǎo)致代碼非常難看帆赢，嵌套也很深小压，所以async/await就出來了
3.Async/await
async/await 是 Javascript 編寫異步程序的新方法砰左。以往的異步方法無外乎回調(diào)函數(shù)和Promise。但是async/await建立于Promise之上场航。
如何使用 Async 函數(shù)
我們還是來看一看 阮一峰 大神的ECMAScript 6 入門的例子
async function timeout(ms) {
await new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);
上面代碼指定50毫秒以后，輸出hello world廉羔。
進一步說溉痢，async函數(shù)完全可以看作多個異步操作，包裝成的一個 Promise 對象憋他，而await命令就是內(nèi)部then命令的語法糖
我們看具體的示例
async 實現(xiàn)異步回調(diào) 異步列隊
1請求完成后孩饼，把1的響應(yīng)參數(shù)傳入2，在發(fā)2請求
上文中的promise 實現(xiàn)方法是通過then的鏈?zhǔn)秸{(diào)用竹挡，但是采用async會更加簡潔明了
async function asyncDemo () {
const r1 = await getData1()
const r2 = await getData2(r1)
console.log(r2)
}
// 1執(zhí)行了
// 2執(zhí)行了
// 請求到模擬數(shù)據(jù)22222拉镀娶！params：請求到模擬數(shù)據(jù)1111拉 用時 3500 ms
用同步的書寫方式實現(xiàn)了異步的代碼。等待getData1的異步函數(shù)執(zhí)行完了后發(fā)返回值賦值給r1揪罕，傳入r2,在執(zhí)行r2
async 異步回調(diào) 并發(fā)
1請求梯码、2請求同時發(fā),規(guī)定請求到達的順序
假如我們有一種這樣的業(yè)務(wù)需求，并發(fā)兩個請求好啰，但是要規(guī)定收到請求的順序應(yīng)該怎么做的轩娶？這里還是借鑒阮一峰大神的代碼
async function asyncDemo2 () {
const arr = [getData1, getData2]
const textPromises = arr.map(async function (doc) {
const response = await doc()
return response
})
// 按次序輸出
for (const textPromise of textPromises) {
console.log(await textPromise);
}
}
// 2執(zhí)行了 (因為2是 1500ms后執(zhí)行) 所以2先執(zhí)行
// 1執(zhí)行了
// 請求到模擬數(shù)據(jù)1拉 (for .. of )規(guī)定了輸出的順序
// 請求到模擬數(shù)據(jù)22222拉！params：undefined
上面代碼中框往，雖然map方法的參數(shù)是async函數(shù)鳄抒，但它是并發(fā)執(zhí)行的，因為只有async函數(shù)內(nèi)部是繼發(fā)執(zhí)行椰弊，外部不受影響许溅。后面的for..of循環(huán)內(nèi)部使用了await，因此實現(xiàn)了按順序輸出
async 總結(jié)
它使得異步代碼變的不再明顯也是一點弊端咯秉版，不過根據(jù)實際情況選擇最合適的異步編程才是最好的選擇贤重。async 是 Generator 函數(shù)的語法糖。所以想更深入的理解其中內(nèi)部原理的趕緊去看看 Generator函數(shù)把
