Generator函數是ES6提供的一種異步編程解決方案，語法行為與傳統函數完全不同
前面的文章里我們介紹了回調函數和 promise 這兩種手段來解決異步，本文將繼續介紹異步發展史上的另外兩種方法：Generator和async/await
Generater
執行 Generator 函數會返回一個遍歷器對象，也就是說，Generator 函數除了狀態機，還是一個遍歷器對象生成函數。返回的遍歷器對象，可以依次遍歷 Generator 函數內部的每一個狀態。
形式上，Generator 函數是一個普通函數，但是有兩個特征。一是，function關鍵字與函數名之間有一個星號；二是，函數體內部使用yield表達式，定義不同的內部狀態（yield在英語里的意思就是“產出”）
關鍵特性：
聲明方式： Generator函數使用function*語法聲明，星號（*）緊跟著function關鍵字后面。
Yield表達式： yield表達式用于暫停和恢復函數的執行。每次函數在yield處暫停時，它會返回yield后面的值給調用者。當再次調用生成器的next()方法時，函數會從上一個yield表達式之后的位置繼續執行，直到下一個yield或函數結束。
返回遍歷器對象： 執行Generator函數時，它不立即執行函數體內的代碼，而是返回一個遍歷器對象（iterator object）。這個對象具有next()方法，每次調用next()方法都會執行函數直到下一個yield表達式，或者直到函數結束。
遍歷器協議： 遍歷器對象遵循遍歷器協議，next()方法返回一個對象，該對象有value和done兩個屬性。value是yield表達式的結果，done是一個布爾值，表示是否到達了生成器函數的末尾。
函數定義:
Generator函數的定義與普通函數類似，但是有以下幾點不同：
使用方法：
創建Generator對象：調用Generator函數時，它不會立即執行函數體內的代碼，而是返回一個Generator對象。這個對象實現了迭代器協議，擁有next()方法。
因為此對象返回Iterator對象，所以我們可以通過for...of進行遍歷
function* hai(){
yield '嗨！';
yield '你好嗎？';
yield '我很好！';
}
for (let h of hai()) {
console.log(h);
}
next()方法：調用Generator對象的next()方法會執行Generator函數直到遇到下一個yield表達式，或者直到函數結束。next()方法返回一個對象，該對象有兩個屬性：
運行邏輯：
遇到yield表達式，就暫停執行后面的操作，并緊緊跟在yield后面的那個表達式的值，作為返回對象的value屬性值。
下次調用next方法時，再繼續往下執行，直到遇到下一個yield表達式
如果沒有再遇到新的yield方法，就一直運行到函數結束，直到return語句為止，并將return語句后面的表達式的值，作為返回對象的value值
如果該函數沒有return語句，則返回的對象value屬性值為undefind
function* hai(){
yield '嗨！';
yield '你好嗎？';
yield '我很好！';
}
var h = hai();
h.next()
h.next()
h.next()
h.next()
發送值給Generator函數：next()方法還可以接受一個參數，這個參數將作為上一個yield表達式的值，從而可以向Generator函數內部發送數據。
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
a.next()//{value: 6, done: false}
a.next()//{value: NaN, done: false}
a.next()//value: NaN, done: true}
var b = foo(5);
b.next()//{value: 6, done: false}
b.next(12)//{value: 8, done: false}
b.next(13)//{value: 42, done: true}
a.next()
foo 函數開始執行，遇到第一個 yield 表達式 (x + 1)，計算 x + 1 的值，即 5 + 1 = 6。
6 被作為 a.next() 的 value 屬性返回，done 屬性為 false 表示生成器還沒有執行完畢。
foo 函數繼續執行，遇到 var y = 2 * (yield (x + 1));，由于上一個 yield 表達式的值被忽略了（沒有通過 a.next(value) 提供），因此 y 的值是 2 * NaN = NaN。
接下來遇到 var z = yield (y / 3);，返回 y / 3 的值，即 NaN / 3 = NaN。
NaN 被作為 a.next() 的 value 屬性返回，done 屬性為 false 表示生成器還沒有執行完畢
foo 函數繼續執行，遇到 return (x + y + z);，計算 x + y + z 的值，即 5 + NaN + NaN = NaN。
NaN 被作為 a.next() 的 value 屬性返回，done 屬性為 true 表示生成器已經執行完畢。
b.next()
foo執行，遇到第一個 yield 表達式 (x + 1)，計算 x + 1 的值，即 5 + 1 = 6。
6 被作為 b.next() 的 value 屬性返回，done 屬性為 false 表示生成器還沒有執行完畢。
遇到 var y = 2 * (yield (x + 1));，由于上一個 yield 表達式的值被設置為 12，因此 y 的值是 2 * 12 = 24。
接下來遇到 var z = y / 3;，計算 y / 3 的值，即 24 / 3 = 8。
8 被作為 b.next() 的 value 屬性返回，done 屬性為 false 表示生成器還沒有執行完畢。
這一行代碼執行后，foo 函數繼續執行，遇到 yield (z);，由于上一個 yield 表達式的值被設置為 13，但這里 13 不會被使用。
接下來遇到 return (x + y + z);，計算 x + y + z 的值，即 5 + 24 + 8 = 37。
37 被作為 b.next() 的 value 屬性返回，done 屬性為 true 表示生成器已經執行完畢。
示例
代碼高亮：
function* countUpTo(max) {
for (let i = 1; i <= max; i++) {
yield i;
}
}
const counter = countUpTo(3);
// 第一次調用next()，從1開始
console.log(counter.next()); // { value: 1, done: false }
// 第二次調用next()，輸出2
console.log(counter.next()); // { value: 2, done: false }
// 最后一次調用next()，輸出3
console.log(counter.next()); // { value: 3, done: false }
// 再次調用next()，Generator函數已經結束
console.log(counter.next()); // { value: undefined, done: true }
async/await
async/await是基于Promise的一種更高級的異步編程語法糖。
async函數總是返回一個Promise。
await關鍵字只能在async函數內部使用，用于等待Promise解析。
使用await關鍵字可以讓異步代碼看起來和同步代碼非常相似，極大地提高了可讀性和可維護性。
async/await是目前處理異步操作最推薦的方式，因為它簡潔且易于理解。
使用方法
async/await形式簡潔，直接在函數前加上async然后在需要異步的操作前加上await即可
下面是使用 async/await 的基本步驟和示例：
步驟
定義異步函數:
使用 async 關鍵字定義函數。
這個函數自動返回一個 Promise。
使用 await 關鍵字:
在 async 函數內部，你可以使用 await 關鍵字等待一個 Promise 完成。
await 只能在 async 函數內部使用。
當 await 一個 Promise 時，函數會暫停執行，直到 Promise 解析（resolve）或拒絕（reject）。
如果 Promise 成功解析，await 表達式的值就是 resolve 的值；如果 Promise 被拒絕，則會拋出一個錯誤。
示例
假設我們有一個異步函數 getData 用于從服務器獲取數據，然后我們使用 async/await 來處理這個異步操作。
Step 1: 定義數據獲取函數
function getData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Hello from server!');
}, 2000); // 模擬網絡延遲
});
}
Step 2: 使用 async/await 獲取數據
async function a() {
console.log(1);
const data = await getData(); // 等待數據獲取完成
console.log(2);
console.log(data);
}
// 調用異步函數
a();
解釋
定義異步函數:
使用 async 關鍵字定義了一個函數 a。
這個函數自動返回一個 Promise。
使用 await 關鍵字:
在 async 函數內部，我們使用 await 關鍵字等待 getData() 函數返回的 Promise 完成。
await 只能在 async 函數內部使用。
當 await 一個 Promise 時，函數會暫停執行，直到 Promise 解析（resolve）或拒絕（reject）。
如果 Promise 成功解析，await 表達式的值就是 resolve 的值；如果 Promise 被拒絕，則會拋出一個錯誤。
調用異步函數:
運行示例
當運行這個示例時，會看到以下輸出：
Hello from server!
這是因為：
異步解決方案的區別
promise和async/await是專門用于處理異步操作的
Generator 并不是為異步而設計出來的，它還有其他功能（對象迭代、控制輸出、部署Interator接口等）
promise編碼相比Generator、async更為復雜化，且可讀性也稍差
Generator、async需要與promise對象搭配處理異步情況
async實質上是Generator的語法糖，相當于會自動執行的Generator函數
async使用上更為簡潔，將異步代碼以同步形式進行編寫，是處理異步編程的最終方案
以上就是本文全部內容，希望對你有所幫助，感謝你的閱讀！
來源：https://juejin.cn/post/7399986436349231144 作者：Alo365
該文章在 2024/8/7 10:32:12 編輯過
400 186 1886
