js非同步發展簡史

seventhMa發表於2018-01-17
JS非同步

什麼是非同步？

所謂非同步，簡單來說就是非同步任務（不會馬上就完成的任務）；但是js不會等待你這個任務完成，而是直接執行下邊的任務；等到你上邊的任務完成之後才會去執行相應的邏輯。比如js讀取檔案就是非同步的過程。

非同步程式設計的語法目標，就是怎樣讓它更像同步程式設計

1、回撥函式

場景： 讀取一個檔案

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('./template.txt', 'utf8', function (err, template) {
	fs.readFile('./data.txt', 'utf8', function (err, data) {
		console.log(template, data)
	})
})

// 這樣的程式碼稱為惡魔金字塔；且有以下問題
// 1、程式碼非常難看
// 2、難以維護
// 3、效率比較低，因為它們是序列的；一次只能請求一個檔案
複製程式碼

2、事件釋出訂閱（為了解決回撥巢狀的問題）

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

let eve = new EventEmitter()
let html = {} // 存放頁面模板和資料
eve.on('onloading', 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('onloading', template) // 觸發onloading事件，執行事件的回撥函式向html中填入模板
})
fs.readFile('./data.txt', 'utf8', function (err, template) {
	eve.emit('onloading', template) // 觸發onloading事件，執行事件的回撥函式向html中填入資料
})
複製程式碼

3、哨兵變數 （同樣處理回撥巢狀的問題） 事件釋出訂閱已經可以解決回撥巢狀的問題，但是還需要引入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)
})
複製程式碼

4、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)
	})
複製程式碼

promise詳細介紹

5、生成器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)
})
複製程式碼

6、Async/await Async其實是一個語法糖，它的實現就是將Generator函式和自動執行器（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;
  });
}
複製程式碼

結論：非同步程式設計發展的目標就是讓非同步邏輯的程式碼看起來像同步一樣；發展到Async/await；是處理非同步程式設計探索的一個里程碑。

相關文章