一、回調函數
優點：簡單、容易理解；
缺點：不利于維護，代碼耦合高；

function getData (url, callBack) {// 模擬發送網絡請求setTimeout(() => {// 假設 res 就是返回的數據var res = {url: url,data: Math.random()}// 執行回調，將數據作為參數傳遞 callBack(res);}, 1000) }getData('/page/1?param=123', (res1) => {console.log(res1);getData(`/page/2?param=${res1.data}`, (res2) => {console.log(res2);getData(`/page/3?param=${res2.data}`, (res3) => {console.log(res3);})}) })

二、事件監聽
優點：容易理解，可以綁定多個事件，每個事件可以指定多個回調函數。
缺點：采用事件驅動模式，取決于某個事件是否發生，流程不夠清晰。

三、發布/訂閱(觀察者模式)
類似于事件監聽，但是可以通過"消息中心"了解現在有多少發布者，多少訂閱者。

四、promise對象
優點：可以利用then方法，進行鏈式寫法；可以書寫發生錯誤的回調函數；
缺點：一旦新建Promise，會立即執行，中途無法取消。如果沒有設置回調函數，Promise內部拋出錯誤，外部無法知道。如果是pending進行中狀態，不知道剛剛開始還是即將完成。

function getDataAsync (url) {return new Promise((resolve, reject) => {setTimeout(() => {var res = {url: url,data: Math.random()}resolve(res);}, 1000)}) }getDataAsync('/page/1?param=123').then(res1 => {console.log(res1);return getDataAsync(`/page/2?param=${res1.data}`);}).then(res2 => {console.log(res2);return getDataAsync(`/page/3?param=${res2.data}`);}).then(res3 => {console.log(res3);})

五、generator函數
優點：函數體內外的數據交換、錯誤處理機制。
缺點：流程管理不方便，何時執行第一階段，何時執行第二階段。generator函數不能自動執行，Thunk函數或者co模塊用于實現generator函數的自動執行。

function getDataAsync (url) {return new Promise((resolve, reject) => {setTimeout(() => {var res = {url: url,data: Math.random()}resolve(res);}, 1000)}) }function * getData () {var res1 = yield getDataAsync('/page/1?param=123');console.log(res1);var res2 = yield getDataAsync(`/page/2?param=${res1.data}`);console.log(res2);var res3 = yield getDataAsync(`/page/2?param=${res2.data}`);console.log(res3)); }var g = getData(); g.next().value.then(res1 => {g.next(res1).value.then(res2 => {g.next(res2).value.then(() => {g.next();})}) }) // 封裝一個執行器 function run (gen) {var g = gen();function next (data) {var res = g.next(data);if (res.done) return res.value;res.value.then((data) => {next(data);})}next(); }run(getData);

六、async函數
優點：內置執行器、更好的語義、更廣的適用性、返回的是promise、結構清晰。
缺點：錯誤處理機制

function getDataAsync (url) {return new Promise((resolve, reject) => {setTimeout(() => {var res = {url: url,data: Math.random()}resolve(res)}, 1000)}) }async function getData () {var res1 = await getDataAsync('/page/1?param=123')console.log(res1)var res2 = await getDataAsync(`/page/2?param=${res1.data}`)console.log(res2)var res3 = await getDataAsync(`/page/2?param=${res2.data}`)console.log(res3) }

轉載于:https://www.cnblogs.com/camille666/p/async_programming.html

總結

以上是生活随笔為你收集整理的异步编程的实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。