【库】Generator:8行代码优雅解决异步嵌套
编辑:浏览器知识Generator的核心 “计步功能” 亦可解决异步嵌套的问题,一定情况下的封装可替代Promise
复制代码
Promise的简易实现,可看该篇文章
一、核心函数的定义
function *AJAX (opt) {
for (let i = 0; i < opt.length; i++) {
let {
url, data, success
} = opt[i]
yield API[url](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[url](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?不好意思,用不惯╭(╯^╰)╮。
加载全部内容