javascript - 同步方式寫異步到底指什么？

問題描述

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

問題解答

異步調用對于當前線程來說，是非阻礙的，所以要想知道異步處理是否完成，或者是否出錯，通常都是通過事件或回調來實現的，這在 Node.js 比比皆是。Ajax 就是很典型的異步調用，以 jQuery.ajax 為例

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

jQuery 的 Ajax 返回的是 jQuery 的 Promise 對象，一般習慣上我們會使用 done() 回調來處理調用完成之后的事情。但實際它也有標準 Promise 的 then()，所以上面的 done 是可以改成 then 的，但是要注意，done 是以事件的形式注冊回調，它返回當前這個 Promise 對象本身，可以鏈式調用注冊若干個回調。而 then 返回的是另一個 Promise 對象(標準 Promise 規范)，鏈式調用的話，每次調用并非作用在同一個 Promise 對象上。

如果在一個回調中需要進行另一個異步調用，就需要在回調中注冊另一個回調。比如要獲取某個數據，需要先從 api1 獲取某個值，再用這個值去 api2 獲取某個資源，再用這個資源中的某個值去 api3 獲取這個值，這樣的回調寫出來會像這樣：

$.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); }); }); });

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

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

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

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 消除了回調，所以看起來跟寫非異步(即同步)代碼一樣。

參考：

閑談異步調用“扁平”化

從地獄到天堂，Node 回調向 async/await 轉變

理解 JavaScript 的 async/await

異步時常見回調函數嵌套，形如：

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

這時出現了回調嵌套，需要一層一層往里套，非常容易出錯且不好維護。

同步方式寫異步類似于：

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 的庫自動執行異步邏輯co(asyncWrapper)

這時候異步業務邏輯就通過正常的同步方式實現了。

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

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

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

樓上兩個答案足矣