说说ES6中Generator的应用
# 是什么
Generator是一个函数, 是ES6提供的一种异步编程解决方案
# 特性
- funtion* name(){} 星号
- 函数内部使用yield,定义不同的状态
# 怎么用
# next运行逻辑
- 遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
- 下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式
- 如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。
- 如果该函数没有return语句,则返回的对象的value属性值为undefined
function* foo(x) {
var y = 2 * (yield (x + 1));
console.log('y',y)
var z = yield (y / 3);
console.log('z',z)
return (x + y + z);
}
var res = foo(5)
b.next() // 6
b.next(12) // 24
b.next(13) // 13
x // 5
y // 24
z // 13
# 异步解决方案比较
- 回调函数
- Promise
- Generator
- async/await
# 回调函数
fs.readFile('/etc/fstab', function (err, data) {
if (err) throw err;
console.log(data);
fs.readFile('/etc/shells', function (err, data) {
if (err) throw err;
console.log(data);
});
});
# Promise
const fs = require('fs');
const readFile = function (fileName) {
return new Promise(function (resolve, reject) {
fs.readFile(fileName, function(error, data) {
if (error) return reject(error);
resolve(data);
});
});
};
readFile('/etc/fstab').then(data =>{
console.log(data)
return readFile('/etc/shells')
}).then(data => {
console.log(data)
})
# generator
const gen = function* () {
const f1 = yield readFile('/etc/fstab');
const f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
# async/await
const asyncReadFile = async function () {
const f1 = await readFile('/etc/fstab');
const f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};
# 区别
- 回调函数:嵌套较多
- Promise:解决嵌套, 链式调用,代码冗长
- generator: 编写非主流,需要next调用
- async/await: generator的语法糖,终极解决
# FAQ
// redux-saga
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'
function* fetchUser(action) {
try {
const user = yield call(Api.fetchUser, action.payload.userId);
yield put({type: "USER_FETCH_SUCCEEDED", user: user});
} catch (e) {
yield put({type: "USER_FETCH_FAILED", message: e.message});
}
}
function* mySaga() {
yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}
function* mySaga() {
yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}
export default mySaga;
上次更新: 2021/12/19, 18:05:42