【库】Generator:8行代码优雅解决异步嵌套

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月12日18:28:10 评论 384
Generator的核心 “计步功能” 亦可解决异步嵌套的问题,一定情况下的封装可替代Promise
复制代码

Promise的简易实现,可看该篇文章

【库】Promise的简便实现,15行代码优雅解决异步嵌套


一、核心函数的定义

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>
复制代码

以下是返回的结果

【库】Generator:8行代码优雅解决异步嵌套

这里就达到了嵌套的目的,并且代码上没有难看的阶梯状结构。


关于

make:o︻そ╆OVE▅▅▅▆▇◤(清一色天空)

blog:http://blog.csdn.net/mcky_love

掘金:https://juejin.im/user/59fbe6c66fb9a045186a159a/posts


结束语

Generator也好,模拟Promise的实现也好,优势在于可读性以及扩展性,你说为啥不直接用Promise?不好意思,用不惯╭(╯^╰)╮。

im, 无色
  • 本文由 发表于 2019年7月12日18:28:10
2019 年最好用的 JavaScript 图表库 JavaScript

2019 年最好用的 JavaScript 图表库

作者:Saurabh Barot 翻译:王强 大数据时代,收集和使用数据的需求正在爆发式增长,数据可视化也变得愈加重要。开发人员在想方设法将不同数据库中的记录整合到仪表板和漂亮的图表中,向人们快速直观...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: