問(wèn)題描述

同步不就是同步，異步不就是異步嗎？同步方式寫(xiě)異步到底指什么？

問(wèn)題解答

異步調(diào)用對(duì)于當(dāng)前線程來(lái)說(shuō)，是非阻礙的，所以要想知道異步處理是否完成，或者是否出錯(cuò)，通常都是通過(guò)事件或回調(diào)來(lái)實(shí)現(xiàn)的，這在 Node.js 比比皆是。Ajax 就是很典型的異步調(diào)用，以 jQuery.ajax 為例

$.getJSON('http://api.youapp.com/resouce1') .done(function(jo) {console.log('api resouce1 返回的是', jo); });

jQuery 的 Ajax 返回的是 jQuery 的 Promise 對(duì)象，一般習(xí)慣上我們會(huì)使用 done() 回調(diào)來(lái)處理調(diào)用完成之后的事情。但實(shí)際它也有標(biāo)準(zhǔn) Promise 的 then()，所以上面的 done 是可以改成 then 的，但是要注意，done 是以事件的形式注冊(cè)回調(diào)，它返回當(dāng)前這個(gè) Promise 對(duì)象本身，可以鏈?zhǔn)秸{(diào)用注冊(cè)若干個(gè)回調(diào)。而 then 返回的是另一個(gè) Promise 對(duì)象(標(biāo)準(zhǔn) Promise 規(guī)范)，鏈?zhǔn)秸{(diào)用的話，每次調(diào)用并非作用在同一個(gè) Promise 對(duì)象上。

如果在一個(gè)回調(diào)中需要進(jìn)行另一個(gè)異步調(diào)用，就需要在回調(diào)中注冊(cè)另一個(gè)回調(diào)。比如要獲取某個(gè)數(shù)據(jù)，需要先從 api1 獲取某個(gè)值，再用這個(gè)值去 api2 獲取某個(gè)資源，再用這個(gè)資源中的某個(gè)值去 api3 獲取這個(gè)值，這樣的回調(diào)寫(xiě)出來(lái)會(huì)像這樣：

$.getJSON('http://api.youapp.com/resouce1') .then(function(jo) {$.getJSON('http://api.youapp.com/resouce2?id=' + jo.blaId) .then(function(jo2) {$.getJSON('http://api.youapp.com/resouce3?xxx=' + jo2.xxxValue) .then(function(value) {console.log('總算拿到了', value); }); }); });

這才三層……很可怕的形式。這種形式被稱為“回調(diào)地獄”。

大家想了很多辦法來(lái)解決這種問(wèn)題，Promise 就是其一，但是 Promise 仍然不能完全擺脫這種形式。co 庫(kù)也是解決方案之一，同樣不能完美擺脫。

不過(guò) ES2017 引入了 async/await，也就是所謂的以同步的形式寫(xiě)異步，比如上面那段代碼可以改寫(xiě)成

async function xxx() { const jo = await $.getJSON('http://api.youapp.com/resouce1'); const jo2 = await $.getJSON('http://api.youapp.com/resouce2?id=' + jo.blaId); const value = await $.getJSON('http://api.youapp.com/resouce3?xxx=' + jo2.xxxValue); console.log('總算拿到了', value);}

async/await 消除了回調(diào)，所以看起來(lái)跟寫(xiě)非異步(即同步)代碼一樣。

參考：

閑談異步調(diào)用“扁平”化

從地獄到天堂，Node 回調(diào)向 async/await 轉(zhuǎn)變

理解 JavaScript 的 async/await

異步時(shí)常見(jiàn)回調(diào)函數(shù)嵌套，形如：

// 先讀取 afs.readFile(’a.txt’, (a) => { // a 讀取成功后讀取 b fs.readFile(’b.txt’, (b) => { // b 讀取成功后讀取 c fs.readFile(’c.txt’. (c) => { console.log(a + b + c) }) })})

這時(shí)出現(xiàn)了回調(diào)嵌套，需要一層一層往里套，非常容易出錯(cuò)且不好維護(hù)。

同步方式寫(xiě)異步類似于：

function * asyncWrapper () { const a = yield read(’a.txt’) const b = yield read(’b.txt’) const c = yield read(’c.txt’) console.log(a + b + c)}// 使用形如 co 的庫(kù)自動(dòng)執(zhí)行異步邏輯co(asyncWrapper)

這時(shí)候異步業(yè)務(wù)邏輯就通過(guò)正常的同步方式實(shí)現(xiàn)了。

同步方式寫(xiě)異步指得是代碼的組織形式而已。使用async/await可以實(shí)現(xiàn)同步方式寫(xiě)異步，看下面代碼：

const testAsync = async () => { const t = await f(); console.log(t);};testAsync();

f是一個(gè)異步操作，如果不使用async/await,直接同步的方式打印t,結(jié)果肯定是undefined；使用async/await之后，代碼看上去形式還是同步的，但是里面是先執(zhí)行異步操作f，再打印t的

樓上兩個(gè)答案足矣