Generator的核心 “计步功能” 亦可解决异步嵌套的问题，一定情况下的封装可替代Promise
复制代码Promise的简易实现，可看该篇文章
一、核心函数的定义
function *AJAX (opt) {
for (let i = 0; i < opt.length; i++) {
let {
url, data, success
} = opt[i]
yield API(data, success)
}
}
复制代码也是先传参注册，不过因为Generator 自带闭包，所以代码量非常简洁实用
二、调用阶段（Demo代码全贴）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body></body>
<script>
/* 核心函数封装 */
function *AJAX (opt) {
for (let i = 0; i < opt.length; i++) {
let {
url, data, success
} = opt[i]
yield API(data, success)
}
}
/* AJAX API config 封装 */
const API = {
'/m/zzg/getList' (data, call) {
setTimeout(() => {
call({
data: 'ajax1返回的数据'
})
}, 1000)
},
'/m/zzg/getUser' (data, call) {
setTimeout(() => {
call({
data: 'ajax2返回的数据'
})
}, 2000)
},
'/m/zzg/saveUser' (data, call) {
setTimeout(() => {
call({
data: 'ajax3返回的数据'
})
}, 1000)
}
}
/* 外部调用需要嵌套的AJAX API */
const Generator = AJAX([{
url: '/m/zzg/getList',
data: {},
success: res => {
console.log(res.data)
Generator.next()
}
}, {
url: '/m/zzg/getUser',
data: {},
success: res => {
console.log(res.data)
Generator.next()
}
}, {
url: '/m/zzg/saveUser',
data: {},
success: res => {
console.log(res.data)
}
}])
Generator.next() // 执行
</script>
</html>
复制代码以下是返回的结果
这里就达到了嵌套的目的，并且代码上没有难看的阶梯状结构。
关于
make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）
blog：http://blog.csdn.net/mcky_love
掘金：https://juejin.im/user/59fbe6c66fb9a045186a159a/posts
结束语
Generator也好，模拟Promise的实现也好，优势在于可读性以及扩展性，你说为啥不直接用Promise？不好意思，用不惯╭(╯^╰)╮。
评论