前言
異步編程模式在前端開發(fā)過程中，顯得越來越重要促脉。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題辰斋。隨著ES6新標(biāo)準(zhǔn)的到來，處理異步數(shù)據(jù)流又有了新的方案瘸味。我們都知道宫仗，在傳統(tǒng)的ajax請求中，當(dāng)異步請求之間的數(shù)據(jù)存在依賴關(guān)系的時候旁仿，就可能產(chǎn)生很難看的多層回調(diào)藕夫，俗稱'回調(diào)地獄'（callback hell），這卻讓人望而生畏枯冈，Promise的出現(xiàn)讓我們告別回調(diào)函數(shù)毅贮，寫出更優(yōu)雅的異步代碼。在實踐過程中尘奏，卻發(fā)現(xiàn)Promise并不完美滩褥，Async/Await是近年來JavaScript添加的最革命性的的特性之一，Async/Await提供了一種使得異步代碼看起來像同步代碼的替代方法炫加。接下來我們介紹這兩種處理異步編程的方案瑰煎。
一铺然、Promise的原理與基本語法
1.Promise的原理
Promise 是一種對異步操作的封裝，可以通過獨立的接口添加在異步操作執(zhí)行成功酒甸、失敗時執(zhí)行的方法魄健。主流的規(guī)范是 Promises/A+。
Promise中有幾個狀態(tài)：
pending: 初始狀態(tài), 非 fulfilled 或 rejected插勤；
fulfilled: 成功的操作沽瘦，為表述方便，fulfilled 使用 resolved 代替农尖；
-
rejected: 失敗的操作析恋。
Promise
pending可以轉(zhuǎn)化為fulfilled或rejected并且只能轉(zhuǎn)化一次，也就是說如果pending轉(zhuǎn)化到fulfilled狀態(tài)盛卡，那么就不能再轉(zhuǎn)化到rejected绿满。并且fulfilled和rejected狀態(tài)只能由pending轉(zhuǎn)化而來，兩者之間不能互相轉(zhuǎn)換窟扑。
2.Promise的基本語法
Promise實例必須實現(xiàn)then這個方法
then()必須可以接收兩個函數(shù)作為參數(shù)
then()返回的必須是一個Promise實例
<script src="https://cdn.bootcss.com/bluebird/3.5.1/bluebird.min.js"></script>//如果低版本瀏覽器不支持Promise，通過cdn這種方式
<script type="text/javascript">
function loadImg(src) {
var promise = new Promise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('圖片加載失敗')
}
img.src = src
})
return promise
}
var src = 'https://www.imooc.com/static/img/index/logo_new.png'
var result = loadImg(src)
result.then(function (img) {
console.log(1, img.width)
return img
}, function () {
console.log('error 1')
}).then(function (img) {
console.log(2, img.height)
})
</script>
二漏健、Promise多個串聯(lián)操作
Promise還可以做更多的事情嚎货，比如，有若干個異步任務(wù)蔫浆，需要先做任務(wù)1殖属，如果成功后再做任務(wù)2，任何任務(wù)失敗則不再繼續(xù)并執(zhí)行錯誤處理函數(shù)瓦盛。要串行執(zhí)行這樣的異步任務(wù)洗显，不用Promise需要寫一層一層的嵌套代碼。
有了Promise原环，我們只需要簡單地寫job1.then(job2).then(job3).catch(handleError);
其中job1挠唆、job2和job3都是Promise對象。
比如我們想實現(xiàn)第一個圖片加載完成后嘱吗，再加載第二個圖片玄组，如果其中有一個執(zhí)行失敗，就執(zhí)行錯誤函數(shù)：
var src1 = 'https://www.imooc.com/static/img/index/logo_new.png'
var result1 = loadImg(src1) //result1是Promise對象
var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
var result2 = loadImg(src2) //result2是Promise對象
result1.then(function (img1) {
console.log('第一個圖片加載完成', img1.width)
return result2 // 鏈?zhǔn)讲僮? }).then(function (img2) {
console.log('第二個圖片加載完成', img2.width)
}).catch(function (ex) {
console.log(ex)
})
這里需注意的是：then 方法可以被同一個 promise 調(diào)用多次谒麦，then 方法必須返回一個 promise 對象俄讹。上例中result1.then如果沒有明文返回Promise實例，就默認(rèn)為本身Promise實例即result1绕德，result1.then返回了result2實例患膛，后面再執(zhí)行.then實際上執(zhí)行的是result2.then
三、Promise常用方法
除了串行執(zhí)行若干異步任務(wù)外耻蛇，Promise還可以并行執(zhí)行異步任務(wù)踪蹬。
試想一個頁面聊天系統(tǒng)胞此，我們需要從兩個不同的URL分別獲得用戶的個人信息和好友列表，這兩個任務(wù)是可以并行執(zhí)行的延曙，用Promise.all()實現(xiàn)如下：
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// 同時執(zhí)行p1和p2豌鹤，并在它們都完成后執(zhí)行then:
Promise.all([p1, p2]).then(function (results) {
console.log(results); // 獲得一個Array: ['P1', 'P2']
});
有些時候，多個異步任務(wù)是為了容錯枝缔。比如布疙，同時向兩個URL讀取用戶的個人信息，只需要獲得先返回的結(jié)果即可愿卸。這種情況下灵临，用Promise.race()實現(xiàn)：
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); // 'P1'
});
由于p1執(zhí)行較快，Promise的then()將獲得結(jié)果'P1'趴荸。p2仍在繼續(xù)執(zhí)行儒溉，但執(zhí)行結(jié)果將被丟棄。
總結(jié)：Promise.all接受一個promise對象的數(shù)組发钝，待全部完成之后顿涣，統(tǒng)一執(zhí)行success;
Promise.race接受一個包含多個promise對象的數(shù)組，只要有一個完成酝豪，就執(zhí)行success
接下來我們對上面的例子做下修改涛碑，加深對這兩者的理解：
var src1 = 'https://www.imooc.com/static/img/index/logo_new.png'
var result1 = loadImg(src1)
var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
var result2 = loadImg(src2)
Promise.all([result1, result2]).then(function (datas) {
console.log('all', datas[0])//<img src="https://www.imooc.com/static/img/index/logo_new.png">
console.log('all', datas[1])//<img src="https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg">
})
Promise.race([result1, result2]).then(function (data) {
console.log('race', data)//<img src="https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg">
})
如果我們組合使用Promise，就可以把很多異步任務(wù)以并行和串行的方式組合起來執(zhí)行
四孵淘、Async/Await簡介與用法
異步操作是 JavaScript 編程的麻煩事蒲障，很多人認(rèn)為async函數(shù)是異步操作的終極解決方案。
1瘫证、Async/Await簡介
async/await是寫異步代碼的新方式揉阎，優(yōu)于回調(diào)函數(shù)和Promise。
async/await是基于Promise實現(xiàn)的背捌，它不能用于普通的回調(diào)函數(shù)毙籽。
async/await與Promise一樣，是非阻塞的毡庆。
async/await使得異步代碼看起來像同步代碼惧财，再也沒有回調(diào)函數(shù)。但是改變不了JS單線程扭仁、異步的本質(zhì)垮衷。
2、Async/Await的用法
使用await乖坠，函數(shù)必須用async標(biāo)識
await后面跟的是一個Promise實例
需要安裝babel-polyfill搀突，安裝后記得引入 //npm i --save-dev babel-polyfill
function loadImg(src) {
const promise = new Promise(function (resolve, reject) {
const img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('圖片加載失敗')
}
img.src = src
})
return promise
}
const src1 = 'https://www.imooc.com/static/img/index/logo_new.png'
const src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
const load = async function(){
const result1 = await loadImg(src1)
console.log(result1)
const result2 = await loadImg(src2)
console.log(result2)
}
load()
當(dāng)函數(shù)執(zhí)行的時候，一旦遇到 await 就會先返回熊泵，等到觸發(fā)的異步操作完成仰迁，再接著執(zhí)行函數(shù)體內(nèi)后面的語句甸昏。
五、Async/Await錯誤處理
await 命令后面的 Promise 對象徐许，運行結(jié)果可能是 rejected施蜜，所以最好把 await 命令放在 try...catch 代碼塊中。try..catch錯誤處理也比較符合我們平常編寫同步代碼時候處理的邏輯雌隅。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
六翻默、為什么Async/Await更好？
Async/Await較Promise有諸多好處恰起，以下介紹其中三種優(yōu)勢：
1. 簡潔
使用Async/Await明顯節(jié)約了不少代碼修械。我們不需要寫.then，不需要寫匿名函數(shù)處理Promise的resolve值检盼，也不需要定義多余的data變量肯污，還避免了嵌套代碼。
2. 中間值
你很可能遇到過這樣的場景吨枉，調(diào)用promise1蹦渣，使用promise1返回的結(jié)果去調(diào)用promise2，然后使用兩者的結(jié)果去調(diào)用promise3貌亭。你的代碼很可能是這樣的:
const makeRequest = () => {
return promise1()
.then(value1 => {
return promise2(value1)
.then(value2 => {
return promise3(value1, value2)
})
})
}
使用async/await的話剂桥，代碼會變得異常簡單和直觀
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}
3.條件語句
下面示例中，需要獲取數(shù)據(jù)属提，然后根據(jù)返回數(shù)據(jù)決定是直接返回，還是繼續(xù)獲取更多的數(shù)據(jù)美尸。
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
} else {
console.log(data)
return data
}
})
}
代碼嵌套（6層）可讀性較差冤议，它們傳達(dá)的意思只是需要將最終結(jié)果傳遞到最外層的Promise。使用async/await編寫可以大大地提高可讀性:
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
} else {
console.log(data)
return data
}
}
如果覺得文章對你有些許幫助师坎，歡迎在我的GitHub博客點贊和關(guān)注恕酸，感激不盡！
