JS 異步發展流程(回調函數=>Async/await)

時間 2019-11-16

標籤異步發展流程函數 async await 欄目 JavaScript 简体版

原文原文鏈接

異步編程的語法目標，就是怎樣讓它更像同步編程html

什麼是異步？

異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務能夠執行了，該任務纔會進入主線程執行。異步執行的運行機制以下:java

全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）。
主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。
主線程不斷重複上面的第三步。

一、回調函數

場景：讀取一個文件node

let fs = require('fs')
fs.readFile('./1.txt', 'utf8', function(err, data){
    // 回調的特色是第一個參數通常爲錯誤對象
    if (err) { 
        // 若是err有值說明程序出錯了
        console.log(err)
    } else { 
        // 不然表示成功獲取到數據data
        console.log(data)
    }
})
複製代碼

固然回調函數也有它的缺點：編程

沒法捕獲錯誤（使用try catch）

funnction readFile (fileName) {
    fs.readFile(fileName, 'utf8', function (data) {
        if (err) {
            console.log(err)
        } else {
            console.log(data)
        }
    })
}
try {
    readFile('./1.txt')
} catch (e) { 
    // 若是上邊讀取文件出錯，獲取不到錯誤信息
    console.log('err', e)
}
複製代碼

不能return readFile 方法中沒法返回讀取到文件的內容（data）
回調地獄

fs.readFile('./data1.txt', 'utf8', function (err, data1) {
  fs.readFile('./data2.txt', 'utf8', function (err, data2) {
    fs.readFile('./data3.txt', 'utf8', function (err, data3) {
      fs.readFile('./data4.txt', 'utf8', function (err, data4) {
        fs.readFile('./data5.txt', 'utf8', function (err, data5) {
            console.log(data1, data2, data3, data4, data5)
        })
      })
    })
  })
})
// 這樣的代碼稱爲惡魔金字塔；且有如下問題
// 一、代碼很是難看
// 二、難以維護
// 三、效率比較低，由於它們是串行的；一次只能請求一個文件
複製代碼

二、事件發佈訂閱

爲了解決回調嵌套的問題promise

let EventEmitter = require('events')
// nodejs核心模塊之一,包含兩個核心方法: 
// on >> 表示註冊監聽,emit >> 表示發射事件

let eve = new EventEmitter()
let html = {} // 存放頁面模板和數據
eve.on('reading', function (key, value) {
    html[key] = value
    if (Object.keys(html).length == 2) {
        console.log(html)
    }
})
fs.readFile('./template.txt', 'utf8', function (err, template) {
    eve.emit('reading', template) 
    // 觸發reading事件，執行事件的回調函數向html中填入模板
})
fs.readFile('./data.txt', 'utf8', function (err, template) {
    eve.emit('reading', template) 
    // 觸發reading事件，執行事件的回調函數向html中填入數據
})
複製代碼

三、哨兵變量

事件發佈訂閱已經能夠解決回調嵌套的問題，可是還須要引入events模塊；利用哨兵變量同樣能夠解決回調嵌套的問題，且不須要引入其餘模塊異步

// 定義一個哨兵函數來處理
function done (key, value) {
    html[key] = value
    if (Object.keys(html).length == 2) {
        console.log(html)
    }
}

fs.readFile('./template.txt', 'utf8', function (err, template) {
    done('template', template)
})
fs.readFile('./data.txt', 'utf8', function (err, template) {
    done('data', data)
})

// 能夠封裝一個高階函數去生成哨兵函數
function render (length, cb) {
    let htm = {}
    return function (key, value) {
        html[key] = value
        if (Object.keys(html).length == length) {
            cb(html)
        }
    }
}

let done = render(2, function (html) {
    console.log(html)
})
複製代碼

四、Promise

上述方法都是用回調函數來處理異步；咱們的目標是把異步往同步的方向靠攏async

//promise的用法再也不闡述，可自行查閱文檔
let promise1 = new Promise(function (resolve, reject) {
    fs.readFile('./1.txt', 'utf8', function (err, data) {
        resolve(data)
    })
})

promise1.then(function (data) {
    console.log(data)
})
複製代碼

五、Generator(生成器)

當咱們在調用一個函數的時候，它並不會立刻執行，而是須要咱們手動的去執行迭代操做（next方法）；簡單來講，調用生成器函數會返回一個迭代器，能夠用迭代器來執行遍歷每一箇中斷點（yield）調用next方法會有返回值value，是生成器函數對外輸出的數據；next方法還能夠接受參數，是向生成器函數內部輸入的數據異步編程

生成器簡單使用

// 方法名前邊加*就是生成器函數
function *foo () {
  var index = 0;
  while (index < 2) {
    yield index++; //暫停函數執行，並執行yield後的操做
  }
}
var bar =  foo(); // 返回的實際上是一個迭代器

console.log(bar.next());    // { value: 0, done: false }
console.log(bar.next());    // { value: 1, done: false }
console.log(bar.next());    // { value: undefined, done: true }
複製代碼

生成器 + Promise解決異步的實現

function readFile (filaName) {
    return new Promise(function (resolve, reject) {
        fs.readFile(filename, function (err, data) {
          if (err) {
            reject(err)
          } else {
            resolve(data)
          }
    })
}
function *read() {
    let template = yield readFile('./template.txt')
    let data = yield readFile('./data.txt')
    return {
        template: template,
        data: data
    }
}
// 生成迭代器r1
let r1 = read()
let templatePromise = r1.next().value
templatePromise.then(function(template) {
    // 將獲取到的template的內容傳遞給生成器函數
    let dataPromsie = r1.next(template).value
    dataPromise.then(function(data) {
        //最後一次執行next傳入data的值；最後返回{template， data}
        let result = r1.next(data).value
        console.log(result)
    })
})
複製代碼

生成器 + promise的實現已經有了一些同步的樣子;藉助一些工具(co)，能夠優雅的編寫上述的代碼

//實現 co 方法
//參數是一個生成器函數
function co (genFn) {
    let r1 = genFn()
    return new Promise(function(resolev, reject) {
        !function next(lastVal) {
            let p1 = r1.next(lastVal)
            if (p1.done) {
                resolve(p1.value)
            } else {
                p1.value.then(next, reject)
            }
        }()
    })
}

//如今獲取上邊的result能夠這樣來取
co(read).then(function(result) {
    console.log(result)
})
複製代碼

六、Async/await

Async實際上是一個語法糖，它的實現就是將Generator函數和自動執行器（co），包裝在一個函數中函數

//實現 co 方法
//參數是一個生成器函數
async function read() {
  let template = await readFile('./template.txt');
  let data = await readFile('./data.txt');
  return template + '+' + data;
}

// 等同於
function read(){
  return co(function*() {
    let template = yield readFile('./template.txt');
    let data = yield readFile('./data.txt');
    return template + '+' + data;
  });
}
複製代碼