總結非同步程式設計的六種方式

a1322674015發表於2019-09-23
非同步程式設計

非同步程式設計

眾所周知 JavaScript 是單執行緒工作，也就是隻有一個指令碼執行完成後才能執行下一個指令碼，兩個指令碼不能同時執行，如果某個指令碼耗時很長，後面的指令碼都必須排隊等著，會拖延整個程式的執行。那麼如何讓程式像人類一樣可以多執行緒工作呢？以下為幾種非同步程式設計方式的總結，希望與君共勉。

  • 回撥函式
  • 事件監聽
  • 釋出訂閱模式
  • Promise
  • Generator (ES6)
  • async (ES7)

非同步程式設計傳統的解決方案：回撥函式和事件監聽

初始示例：假設有兩個函式, f1 和 f2，f1 是一個需要一定時間的函式。

function f1() {
    setTimeout(function(){
        console.log('先執行 f1')
    },1000)
}
function f2() {
    console.log('再執行 f2')
}

回撥函式

因為 f1 是一個需要一定時間的函式，所以可以將 f2 寫成 f1 的回撥函式，將同步操作變成非同步操作，f1 不會阻塞程式的執行，f2 也無需空空等待，例如 JQuery 的 ajax。

回撥函式的demo：

function f1(f2){
    setTimeout(function(){
        console.log('先執行 f1')
    },1000)
    f2()
}
function f2() {
    console.log('再執行 f2')
}

效果如下：
clipboard.png

總結：回撥函式易於實現、便於理解，但是多次回撥會導致程式碼高度耦合

事件監聽

指令碼的執行不取決程式碼的順序，而取決於某一個事件是否發生。

事件監聽的demo

$(document).ready(function(){
     console.log('DOM 已經 ready')
});

釋出訂閱模式

釋出/訂閱模式是利用一個訊息中心，釋出者釋出一個訊息給訊息中心，訂閱者從訊息中心訂閱該訊息，。類似於 vue 的父子元件之間的傳值。

釋出訂閱模式的 demo

//訂閱done事件
$('#app').on('done',function(data){
    console.log(data)
})
//釋出事件
$('#app').trigger('done,'haha')

Promise

Promise 實際就是一個物件， 從它可以獲得非同步操作的訊息，Promise 物件有三種狀態，pending(進行中)、fulfilled（已成功）和rejected（已失敗）。Promise 的狀態一旦改變之後，就不會在發生任何變化,將回撥函式變成了鏈式呼叫。

Promise 封裝非同步請求demo

export default function getMethods (url){
    return new Promise(function(resolve, reject){
        axios.get(url).then(res => {
            resolve(res)
        }).catch(err =>{
            reject(err)
        })
    })
}

getMethods('/api/xxx').then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

Generator

Generator 函式是一個狀態機，封裝了多個內部狀態。執行 Generator 函式會返回一個遍歷器物件，使用該物件的 next() 方法，可以遍歷 Generator 函式內部的每一個狀態，直到 return 語句。

形式上，Generator 函式是一個普通函式，但是有兩個特徵。一是，function關鍵字與函式名之間有一個星號；二是，函式體內部使用yield表示式， yield是暫停執行的標記。

next() 方法遇到yield表示式，就暫停執行後面的操作，並將緊跟在yield後面的那個表示式的值，作為返回的物件的value屬性值。

Generator 的 demo

function *generatorDemo() {
  yield 'hello';
  yield  1 + 2;
  return 'ok';
}

var demo = generatorDemo()

demo.next()   // { value: 'hello', done: false } 
demo.next()   // { value: 3, done: false } 
demo.next()   // { value: 'ok', done: ture } 
demo.next()   // { value: undefined, done: ture }

async

async函式返回的是一個 Promise 物件，可以使用 then 方法新增回撥函式，async 函式內部 return 語句返回的值，會成為 then 方法回撥函式的引數。當函式執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函式體內後面的語句。

1.await命令後面返回的是 Promise 物件，執行結果可能是rejected，所以最好把await命令放在try...catch程式碼塊中。

async 的 demo1

async function demo() {
  try {
    await new Promise(function (resolve, reject) {
      // something
    });
  } catch (err) {
    console.log(err);
  }
}

demo().then(data => {
    console.log(data)  // 
})

參考文獻
https://developers.google.com...
http://es6.ruanyifeng.com/

相關文章