Genertor生成器 、Generator内next()的传参问题、 Generator模拟用户下单、async的使用：

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量561 收藏
点赞数
分类专栏： javascript ES6 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51066068/article/details/124740331
版权
javascript 同时被 2 个专栏收录
122 篇文章 11 订阅
订阅专栏
ES6
28 篇文章 2 订阅
订阅专栏

目录

Genertor生成器

 Generator内next()的传参问题

 Generator模拟用户下单

async的使用：

Genertor生成器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //创建一个Generator函数
      //1.function和函数名之间要有一个*
      //2.函数内部会有yield表达式,使用yield表达式结合next进行使用
      function* gen() {
        console.log("111");
        yield "两只老虎";
        console.log("222");
        yield "跑得快";
        console.log("333");
        yield "跑的快";
        console.log("444");
        yield "一只没有尾巴";
      }
      let a = gen();
      //a.next()要看迭代器内部有多少个状态，就执行几次next()
      console.log(a.next());
      console.log(a.next());
      console.log(a.next());
      console.log(a.next());
      console.log(a.next());
    </script>
  </body>
</html>

 Generator内next()的传参问题

       //1.传参是可以的

      //如果创建Generator函数的时候，有设置形式参数，

      //但是用next()方法调用的时候，没有对应传实际参数，

      //这次调用无效

      //Generator里的next()方法可以进行参数的传递，

      //此参数作为yield表达式的返回值 next优先 yield次之

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //参数传递问题
      //创建一个generator函数
      function* gen(arg) {
        console.log(arg, "参数");

        let one = yield 111;
        console.log("one--", one);

        let two = yield 222;
        console.log("one--", two);

        let three = yield 333;
        console.log("one--", three);
      }
      let a = gen("hello world");
      //1.传参是可以的
      //如果创建Generator函数的时候，有设置形式参数，
      //但是用next()方法调用的时候，没有对应传实际参数，
      //这次调用无效
      a.next();
      //Generator里的next()方法可以进行参数的传递，
      //次参数作为yield表达式的返回值 next优先 yield次之
      a.next("aaa"); //one-- aaa
      a.next("bbb"); //one-- bbb
      a.next("ccc"); //one-- ccc
    </script>
  </body>
</html>

 

 Generator模拟用户下单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 模拟用户下单的过程
      // 获取用户数据(登录携带用户数据) -> 浏览商品（商品信息） -> 用户下单（用户id） -> 订单
      //用户ID -> 订单数据 订单id -> 订单里的商品数据

      //获取用户数据
      function getUser() {
        // 延时函数
        setTimeout(() => {
          let userId = "我是用户id";
          //调用函数
          a.next(userId);
        }, 2000);
      }
      //通过用户id获取订单数据
      function getOrder(userId) {
        setTimeout(() => {
          let orderId = "我是订单id";
          a.next(orderId);
        });
      }
      //根据订单id获取商品数据
      function getGoods(orderId) {
        setTimeout(() => {
          let goodsData = "商品数据";
          a.next(goodsData);
        });
      }

      //需求：原本按照逻辑分析，以上三种方法是嵌套结构，拿到上一个数据才能完成下一个请求
      //es6解决：使用generator函数将以上三种数据放入状态机管理  手动去控制哪个方法执行
      //1.创建generator函数
      function* gen() {
        console.log("订单开始处理");
        //处理用户信息的，拿用户id
        let userId = yield getUser();
        console.log(userId);

        //根据用户id获取订单数据的方法
        let orderId = yield getOrder(userId);
        console.log(orderId);

        //根据订单id获取产品数据的方法
        let goodsData = yield getGoods(orderId);
        console.log(goodsData);
      }

      //2.执行
      let a = gen();
      //想要手动控制执行哪个方法，得用next()
      a.next();
    </script>
  </body>
</html>

 

async的使用：

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- 
        //获取轮播图 get
        http://47.100.84.201:8888/carousel/findAll
        //获取所有用户 get
        http://47.100.84.201:8888/baseUser/findAll
     -->
  </head>
  <body>
    <script>
      //声明函数 这个函数里 要先过去到用户的数据 再获取到轮播图的数据
      //async和await是generator的语法糖

      //没有await，只是async修的是方法，表示都是异步加载，输出谁先谁后
      //不一定是先1后2，因为都是异步加载，先后就是看谁先返回谁
      //所以想要限制一定要从1 开始，就需要加上await,1如果没有拿到数据/不成功，2一定拿不到
      async function getData() {
        //获取用户数据
        let userData = await $.get(
          "http://47.100.84.201:8888/carousel/findAll"
        );
        console.log("1", userData);
        //获取轮播图数据
        let swiperData = await $.get(
          "http://47.100.84.201:8888/baseUser/findAll"
        );
        console.log("2", swiperData);
      }
      getData();
    </script>
  </body>
</html>

 

The..Fuir
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
生成器中yield和next()的用法解析
weixin_30542079的博客
08-27 587
生成器概念: python使用生成器对延迟操作提供了支持,就是需要的时候才产生结果,而不是产生结果. 生成器函数: 和其他函数编写方式相同,使用yield语句一次返回一次结果,在每个结果之间挂起当前状态,下次调用直接继续当前的状态. 生成器表达式: 类似于列表解析,不同的是他返回的是一个迭代对象而不是一个列表. #列表生成器: L = [x for x in range(5)] pr...
生成器函数传参数小记
lakenQi
03-21 778
Generator函数是可以传参数，一直用的不明不白的，今天写个例子，运行一下，记录一下过程，如下面这个小例子： //简单的序列生成，主要看next传参数的时机 let test = { getId : function*(data){ let id = 0, param=null; while(id < 4){ console.log(`上一次param:${pa...
js代码-生成器函数模拟async/await
07-15
js代码-生成器函数模拟async/await
Generator生成器 —— next()方法
小柒的前端之旅
07-22 3210
前面的话 Generator函数是ES6提供的一种异步编程的解决方案，语法行为与传统的函数完全不同。 基本概念 从语法上看，首先可以把它理解为一个状态机，封装了多个内部状态；其次执行Generator函数会返回一个遍历器对象，也就是说Generator函数还是一个遍历器对象的生成函数。 从形式上看，Generator函数是一个普通函数，但有两个特征：函数名前面有一个星号；函数体内部使用yield语...
异步解决方案——Generator 函数（了解异步编程，Generator 执行机制、next传参）
Concise200的博客
02-23 777
异步解决方案——Generator 函数（了解异步编程，Generator 执行机制、next传参）
还只是听说过Generator函数？那就来全面了解它吧
weixin_小白鼠的博客
08-30 178
Generator函数时ES6提供的一种异步编程解决方案；三、调用与执行-分段调用也是使用小括号，但是调用Generator函数后，该函数并不执行，返回的也不是函数运行的结果，而是一个遍历器对象 Iterator ObjectGenerator函数分段执行，yield语句是暂停执行的标记，而next 方法可以恢复执行Generator函数返回的遍历器对象每次调用 next() 方法，内部指针就从函数头部或上一次停下来的方法开始执行，直到遇到下一条 yield 或 return 语句为止。
Generator函数 传参
weixin_43606967的博客
06-24 347
终于整明白这个传参了，记录一下。是在b站上看这个老师的视频整明白的 https://www.bilibili.com/video/BV1Rp4y1v7AH?from=search&seid=10986451695841168951 本质上，Generator函数就是一个封装的异步任务，或者说是异步任务容器。 yield命令是异步不同阶段的分界线，所以是，有时也会把yield当成是return（当然有本质的不同） .next() 可以理解为 一个“启动方法” 每次调用 .next() .
【基础知识】python生成器、迭代器,iter()、next()详解
All_In_gzx_cc的博客
06-22 858
1、容器 容器是用来储存元素的一种数据结构，容器将所有数据保存在内存中，Python中典型的容器有：list，set，dict，str等等。 class test(): def __init__(self,data=1): self.data = data def __iter__(self): return self def __next__(self): if self.data > 5: raise
js代码-Generator函数：状态机-生成器
07-15
在JavaScript的世界里，Generator函数是一种特殊的函数，它允许我们创建可暂停执行的函数，从而实现对异步操作的控制，也可以被理解为一种轻量级的状态机。Generator函数的引入，极大地改善了JavaScript中处理复杂...
【JavaScript源代码】Javascript生成器（Generator）的介绍与使用.docx
12-29
JavaScript 生成器（Generator）是 JavaScript 语言中一种特殊的函数类型，它们允许你在函数内部创建可暂停和恢复的执行流程。生成器的核心在于 `yield` 关键字，它不同于传统函数的 `return`，`yield` 使得生成器...
async-tasks-with-es6-generators:使用 ES6 生成器处理异步任务
06-17
使用回调调用异步任务以继续生成器（调用 next）。 回调返回 yield 表达式的value 。 然后运行程序获取 yield 表达式的值并返回它。 处理 generator 返回的回调。 这里处理上一步的返回值。 上面的语法是： // ...
3.12 generator生成器函数中，next调用传入的参数的作用
weixin_45785694的博客
03-12 760
在调用next时传入的值，就是yield表达式执行后的返回值。
Generator函数和async函数
AIpoem的博客
08-16 351
1.Generator函数、yield表达式、next()的参数、for...of 循环、Generator的应用 2.async 函数、返回Promise对象、使用then()、返回的Promise对象的状态变化、await表达式、错误处理、使用时注意点、async函数的应用
es6新的数据类型——generator
weixin_30685029的博客
08-08 200
todo 一、Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。 语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。 执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的...
generator之next（）
gaotihong的博客
08-18 1295
原文链接：https://blog.csdn.net/pfm685757/article/details/49924099 对于普通的生成器，第一个next调用，相当于启动生成器，会从生成器函数的第一行代码开始执行，直到第一次执行完yield语句（第4行）后，跳出生成器函数。 然后第二个next调用，进入生成器函数后，从yield语句的下一句语句（第5行）开始执行，然后重新运行到yield语句...
generator的next传参注意点
Qian_mos的博客
03-11 2217
1. 返回多个结果： 一般一个函数只能返回一个结果，generator可以使得函数返回多个结果。 用法：function*定义，函数中可以用return语句，可以用yield返回多次。 function* foo(x) { yield x + 1; yield x + 2; return x + 3; } foo(1) //表示创建了一个generator对象，但是还没...
（基础）JavaScript生成器，执行，传递参数
次顶级的博客
12-22 338
生成器：生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执 行等。 首先，生成器函数需要在function的后面加一个符号：* 其次，生成器函数可以通过yield关键字来控制函数的执行流程： 最后，生成器函数的返回值是一个Generator（生成器）： function* foo() { console.log("函数开始执行~") const value1 = 100 console.log("第一段代码:", value1)
generator的返回值和next的参数
huangbx_tx的博客
10-10 539
看了一篇关于generator和async/await关系的文章，受益匪浅。但是对于文章内代码的一些细节有一些疑惑，因此写下自己的一些猜想，待日后考证 function* another() { yield '人月神话'; } function* gen() { yield* another(); // 移交执行权 const a = yield 'hello'; const b...
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 880
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
"MyBatis Generator英文版资料：MBG简介与生成器使用详解
The MyBatis Generator (MBG) is a powerful code generator tool designed specifically for MyBatis, a popular Java persistence framework. This tool simplifies the process of setting up objects and ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值