亚洲视频精品在线,在线一区观看,欧美日韩1区

面試官問 async、await 函數原理是在問什么？

1. 前言

這周看的是 co 的源碼，我對 co 比較陌生，沒有了解和使用過。因此在看源碼之前，我希望能大概了解 co 是什么，解決了什么問題。

2. 簡單了解 co

先看了 co 的 GitHub，README 是這樣介紹的：

Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way.

看起來有點懵逼，又查了一些資料，大多說 co 是用于 generator 函數的自動執行。generator 是 ES6 提供的一種異步編程解決方案，它最大的特點是可以控制函數的執行。

2.1 關于 generator

說到異步編程，我們很容易想到還有 promise，async 和 await。它們有什么區別呢？先看看 JS 異步編程進化史：callback -> promise -> generator -> async + await

面試官問 async、await 函數原理是在問什么？

JS 異步編程

再看看它們語法上的差異：

Callback	Promise	Generator	async + await + Promise
ajax(url, () => {})	Promise((resolve,reject) => { resolve() }).then()	function* gen() { yield 1}	async getData() { await fetchData() }

關于 generator 的學習不在此篇幅詳寫了，需要了解它的概念和語法。

3. 學習目標

經過簡單學習，大概明白了 co 產生的背景，因為 generator 函數不會自動執行，需要手動調用它的 next() 函數，co 的作用就是自動執行 generator 的 next() 函數，直到 done 的狀態變成 true 為止。

那么我這一期的學習目標：

1）解讀 co 源碼，理解它是如何實現自動執行 generator

2）動手實現一個簡略版的 co

4. 解讀 co 源碼

co 源碼地址：https://github.com/tj/co

4.1 整體架構

從 README 中，可以看到是如何使用 co ：

co(function* () {
var result = yield Promise.resolve(true);
return result;
}).then(function (value) {
console.log(value);
}, function (err) {
console.error(err.stack);
});

從代碼可以看到它接收了一個 generator 函數，返回了一個 Promise，這部分對應的源碼如下。

function co(gen) {
var ctx = this;
// 獲取參數
var args = slice.call(arguments, 1);
// 返回一個 Promise
return new Promise(function(resolve, reject) {
// 把 ctx 和參數傳遞給 gen 函數
if (typeof gen === 'function') gengen = gen.apply(ctx, args);
// 判斷 gen.next 是否函數，如果不是直接 resolve(gen)
if (!gen || typeof gen.next !== 'function') return resolve(gen);
// 先執行一次 next
onFulfilled();
// 實際上就是執行 gen.next 函數，獲取 gen 的值
function onFulfilled(res) {
var ret;
try {
ret = gen.next(res);
} catch (e) {
return reject(e);
}
next(ret);
return null;
}
// 對 gen.throw 的處理
function onRejected(err) {
var ret;
try {
ret = gen.throw(err);
} catch (e) {
return reject(e);
}
next(ret);
}
// 實際處理的函數，會遞歸執行，直到 ret.done 狀態為 true
function next(ret) {
// 如果生成器的狀態 done 為 true，就 resolve(ret.value)，返回結果
if (ret.done) return resolve(ret.value);
// 否則，將 gen 的結果 value 封裝成 Promise
var value = toPromise.call(ctx, ret.value);
// 判斷 value 是否 Promise，如果是就返回 then
if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
// 如果不是 Promise，Rejected
return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
+ 'but the following object was passed: "' + String(ret.value) + '"'));
}
});
}

看到這里，我產生了一個疑問：Promise + then 也可以處理異步編程，為什么 co 的源碼里要把 Promise + generator 結合起來呢，為什么要這樣做？直到我搞懂了 co 的核心目的，它使 generator 和 yield 的語法更趨向于同步編程的寫法，引用阮一峰的網絡日志中的一句話就是：

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

可以看一個 Promise + then 的例子：

function getData() {
return new Promise(function(resolve, reject) {
resolve(1111)
})
}
getData().then(function(res) {
// 處理第一個異步的結果
console.log(res);
// 返回第二個異步
return Promise.resolve(2222)
})
.then(function(res) {
// 處理第二個異步的結果
console.log(res)
})
.catch(function(err) {
console.error(err);
})

如果有多個異步處理就會需要寫多少個 then 來處理異步之間可能存在的同步關系，從以上的代碼可以看到 then 的處理是一層一層的嵌套。如果換成 co，在寫法上更優雅也更符合日常同步編程的寫法：

co(function* () {
try {
var result1 = yield Promise.resolve(1111)
// 處理第一個異步的結果
console.log(result1);
// 返回第二個異步
var result2 = yield Promise.resolve(2222)
// 處理第二個異步的結果
console.log(result2)
} catch (err) {
console.error(err)
}
});

4.2 分析 next 函數

源碼的 next 函數接收一個 gen.next() 返回的對象 ret 作為參數，形如{value: T, done: boolean}，next 函數只有四行代碼。

第一行：if (ret.done) return resolve(ret.value); 如果 ret.done 為 true，表明 gen 函數到了結束狀態，就 resolve(ret.value)，返回結果。

第二行：var value = toPromise.call(ctx, ret.value); 調用 toPromise.call(ctx, ret.value) 函數，toPromise 函數的作用是把 ret.value 轉化成 Promise 類型，也就是用 Promise 包裹一層再 return 出去。

function toPromise(obj) {
// 如果 obj 不存在，直接返回 obj
if (!obj) return obj;
// 如果 obj 是 Promise 類型，直接返回 obj
if (isPromise(obj)) return obj;
// 如果 obj 是生成器函數或遍歷器對象, 就遞歸調用 co 函數
if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
// 如果 obj 是普通的函數類型，轉換成 Promise 類型函數再返回
if ('function' == typeof obj) return thunkToPromise.call(this, obj);
// 如果 obj 是一個數組, 轉換成 Promise 數組再返回
if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
// 如果 obj 是一個對象, 轉換成 Promise 對象再返回
if (isObject(obj)) return objectToPromise.call(this, obj);
// 其他情況直接返回
return obj;
}

第三行：if (value && isPromise(value)) return value.then(onFulfilled, onRejected); 如果 value 是 Promise 類型，調用 onFulfilled 或 onRejected，實際上是遞歸調用了 next 函數本身，直到 done 狀態為 true 或 throw error。

第四行：return onRejected(...) 如果不是 Promise，直接 Rejected。