ES6~ES11新特性：生成器函数，Promise

已于 2024-03-22 11:58:31 修改
阅读量354 收藏
点赞数
分类专栏： ES6~ES11新特性 文章标签： es6 javascript 前端
于 2022-11-18 20:52:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hibiscus_open/article/details/127908353
版权

目录

本次的生成器函数以及promise都是关于异步编程的，如果有对JS异步不明白的小伙伴我建议大家去看我的这篇博客>-<

一.生成器函数

生成器就是一个特殊的函数，用于异步编程

  • 声明和调用

声明方式：function * 函数名( ){ }

        function * add(){
            console.log('111');
        }

正确的调用方法

let a1 = add();
a1.next();

pic1

普通的调用方法在这里是不可以的

函数代码的分隔符 yield

        function * add(){
            console.log('111');
            yield '学生';
            console.log('222');
            yield '老师';
            console.log('333');
            yield '学习';
            console.log('444');
        }

我这里用了三个yield，它们将函数代码分割成四块

pic2

现在我们来调用函数

        let a1 = add();
        a1.next();
        a1.next();
        a1.next();
        a1.next();

因为有yield对代码进行分割，所以我们原本需要调用一次就全部输出的内容我们需要调用四次才能够完全显示

pic3

同时因为它是一个迭代器对象，所以我们可以使用for…of对其进行遍历

        for(let v of add()){
            console.log(v);
        }

我们来看一下结果

pic4

这里我们调用一下next()方法

        function * add(){
            // console.log('111');
            yield '学生';
            // console.log('222');
            yield '老师';
            // console.log('333');
            yield '学习';
            // console.log('444');
        }
        let a1 = add();
        console.log(a1.next())
        console.log(a1.next())
        console.log(a1.next())
        console.log(a1.next())

结果是这样的

pic5

  • 参数传递

我们先创建一个生成器函数

        function * fen(){
            yield 111;
            yield 222;
            yield 333;
        }
        let a = fen();
        console.log(a.next());

其结果是这样的

pic6

我们可以传递参数

function * fen(love){
    console.log(love);
}
let a = fen('no1');
console.log(a.next());

pic7

next方法可以传入实参
下一个next方法传入的实参将作为上一个yield方法的返回值

        function * fen(love){
            console.log(love);    //输出love

            const one = yield 111;
            console.log(one);

            const two = yield 222;
            console.log(two);
            
            const three = yield 333;
            console.log(three);
        }

        let a = fen('no1');

        console.log(a.next());
        console.log(a.next('no2'));
        console.log(a.next('no3'));
        console.log(a.next('no4'));

pic8

注意： 第一次调用next()时传入的值不会使用，只是为了开始执行生成器函数

        function * fen(love){
            console.log(love);     //输出love
 
            const one = yield 111;
            console.log(one);

            const two = yield 222;
            console.log(two);
            
            const three = yield 333;
            console.log(three);
        }

        let a = fen('no1');
        
        console.log(a.next('nox'));
        console.log(a.next('no2'));
        console.log(a.next('no3'));
        console.log(a.next('no4'));

pic9

其结果是一样的

实例

1.代码开始执行1s后控制台输出111, 3s后控制台输出222, 6s后控制台输出333

  • 普通方法
        setTimeout(() => {
            console.log(111);
            setTimeout(() => {
                console.log(222);
                setTimeout(() => {
                    console.log(333);
                },3000);
            },2000);
        },1000);

虽然也会成功执行，但是一旦要求多了就会产生回调地狱，这是不可取的

  • 生成器函数
        function one(){     //输出111的函数
            setTimeout(() => {
                console.log(111)
                a.next();
            },1000)
        }

        function two(){     //输出222的函数
            setTimeout(() => {
                console.log(222)
                a.next();
            },2000)
        }

        function three(){       //输出333的函数
            setTimeout(() => {
                console.log(333)
            },3000)
        }

        function * gen(){       //生成器函数
            yield one();
            yield two();
            yield three();
        }

        let a = gen();
        a.next();

附执行结果的视频链接>-<有需求的小伙伴可以前往B站自行观看

利用生成器函数则不会产生回调地狱

2.模拟获取 用户数据 订单信息 商品数据

  1. 首先我们创建函数
        function getUsers(){
            setTimeout(() => {
                let data = "用户数据"
            },1000)
        }

        function getOrder(){
            setTimeout(() => {
                let data = "订单信息"
            },1000)
        }

        function getGoods(){
            setTimeout(() => {
                let data = "商品数据"
            },1000)
        }
        
        function * gen(){
            yield getUsers();
            yield getOrder();
            yield getGoods();
        }

        let a = gen();
        a.next();
  1. 调用next方法将数据传入yield中，输出它的返回值
        function getUsers(){
            setTimeout(() => {
                let data = "用户数据"
                // 调用next方法，并将数据传入
                a.next(data)
            },1000)
        }

        function getOrder(){
            setTimeout(() => {
                let data = "订单信息"
                a.next(data)
            },1000)
        }

        function getGoods(){
            setTimeout(() => {
                let data = "商品数据"
                a.next(data)
            },1000)
        }

        function * gen(){
            let users = yield getUsers();
            console.log(users);

            let order = yield getOrder();
            console.log(order);

            let goods = yield getGoods();
            console.log(goods);
        }

        let a = gen();
        a.next();

附执行结果的视频链接>-<有需求的小伙伴可以前往B站自行观看

二.Promise

Promise是ES6引入的异步编程的新解决方案

Promise的使用

我们先来实例化一个Promise对象

        const p = new Promise(function(resolve, reject){
        })

它这里有两个参数，我给它们起名为resolve和reject（默认写法，实际上可以起任何名字）

接下来往里面放一个异步函数settimeout

        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                // resolve代表成功
                let data = '用户数据'
                resolve(data);

                // reject代表失败
                let err = '数据读取失败'
                reject(err);
            }, 1000)
        })

调用一下

        p.then(function(value){     //成功执行此函数
            console.log(value);
        }, function(reason){        //失败执行此函数
            console.log(reason);
        })

要使用的话我们需要调用promise的then方法，该方法中有两个函数，一个成功时执行，一个失败时执行

可以看到我们的结果是这样的

pic10
如果我们把它注掉

        const p = new Promise(function(resolve, reject){
            setTimeout(function(){
                // resolve代表成功
                // let data = '用户数据'
                // resolve(data);

                // reject代表失败
                let err = '数据读取失败'
                reject(err);
            }, 1000)
        })

在调用后结果是这样的

pic11

Promise在这里只是一个简单介绍，整体的使用方法以及过程原理等等我会发在一个新的专栏>-<里，欢迎大家前去阅读。

选集为20，21，22，23，24

Hibiscus_open
关注
专栏目录
es6 生成器和Promise（es6学习笔记04）
sandy_star
02-01 335
前言：本篇主要记下生成器和Promise 一、生成器 生成器其实就是一个特殊的函数。 生成器函数：是es6提供的一种**异步编程**解决方案，语法行为与传统函数完全不同。 异步编程：简单来说就是纯回调函数，例如node、fs、ajax、MongoDB等 1.1生成器的声明 在函数名前面加* //声明特殊 function * hong(){ console.log("你好，红红"); //并不会直接输出 } //执行特殊 let iterator = hong(); terator.next(.
【前端进阶】 ES6之“生成器”学习+ 生成器和Promise的结合使用
鸭绒的博客
06-16 481
前言： ES6生成器是一种可以实现看似同步的异步流程控制表达风格。 1.1 打破完整运行 在代码中几乎普遍依赖的一个假定：一个函数一旦开始执行，就会运行到结束，期间不会有其他代码能够打断它并插入其间。 这是个错误的假定。ES6引入了一个新的函数类型，它并不符合这种运行到结束的特性，这类新函数被称为生成器。 看下面代码： var x=1; function *foo(){ x++; yield;//暂停 console.log("x:",x); }
ES6新特性之生成器函数 (generator function): function*
ddez46767的博客
08-16 357
一、什么是生成器函数？ 生成器函数是ES6的新特性之一，它是一个在执行时能中途暂时退出，后面重新调用又能重新进入继续执行的一种函数。 并且在函数内定义的变量的所有状态不受中途退出的影响。 二、语法 声明方式： function* 函数名([参数1[, 参数2[, ... 参数n]]]) { JS语句 } 调用说明： 1） 调用生成器对象时会返回一个生成器的迭代...
生成器和Promise
小超人日常码字
12-02 374
ES6前沿特性：生成器和promise 生成器是一种特殊类型的函数。当从头到尾运行标准函数时，它最多只生成一个值。然而生成器函数会在几次运行请求中暂停，因此每次运行都可能会生成一个值。 生成器经常被当作一种古怪不常用的语言特性。 本章会学到如何使用生成器来简化复杂循环，如何利用生成器的能力来挂起和恢复循环的执行，这些技巧可以帮助写出更简单、更优雅的异步代码。 对象的一个新的内置类型promise...
JavaScript函数式编程——生成器和promise
绝尘
12-23 664
生成器和promise 全新的ES6的前沿特性：生成器（generator）和promise 使用生成器函数 生成器函数几乎是一个完全崭新的函数类型，它和标准的普通函数完全不同。生成器函数能够生成一组值的序列。但是每个值的生成是基于每次请求，并不同于标准函数那样立即生成。生成器几乎从不挂起，随后当对另一个值的请求到来后，生成器就会从上次离开的位置恢复执行。 function assert(co...
ES6语法特性（二）迭代器 生成器 Promise
qq_38232003的博客
11-26 217
ES6 迭代器 迭代器就是为实现对不同集合进行统一遍历操作的一种机制，只要给需要遍历的数据结构部署Iterator接口，通过调用该接口，或者使用消耗该接口的API实现遍历操作。 ES6为迭代器引入了一个隐式的标准化接口。Javascript许多内建的数据结构，例如Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象都具备 Iterator 接口。 Iterator接口主要为for of 使用，for of（遍历的是value ） 不同于fo
JavaScript ES6~ES11新特性学习笔记练习文件
05-02
这份“JavaScript ES6~ES11新特性学习笔记练习文件”正是为了帮助开发者系统学习和掌握这些新特性而准备的。以下将详细阐述这些版本中的关键更新： 1. **箭头函数**： 箭头函数提供了简洁的函数定义方式，如 `...
ES6~ES11
aliyun3的博客
04-13 637
第一章：ES6语法 第一节：ES6的概念 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。 第二节：为什么使用ES6 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有
整理es6-es12新特性
然后不二
02-24 637
es6-es12所有新特性
ES6-ES11新特性（这一篇就够了）
m0_61490399的博客
06-29 3602
ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展ECMAScript 是由网景的布兰登·艾克开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为 LiveScript，最后重命名为 JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公
篇章七 ES6-ES11新特性
虎康的博客
03-31 234
ES 即 ECMAScript，是脚本语言的规范，而平时经常编写的JavaScript，是 EcmaScript 的一种实现，所以 ES 的新特性其实指的就是 JavaScript 的新特性为什呢要学习 ES6。
generator生成器和promise配合实现看似同步的异步流程控制(async和await)
最新发布
qq_42372534的博客
05-13 278
本文来自于 <你不知道的Javascript> 学习笔记。生成器函数返回的是迭代器,在内部每个。相当于就是把这个流程写进了语法层面.函数相当于 生成器,
使用生成器函数和Promise改善异步流程
pastelsubliminal的博客
08-17 214
最近在学习JavaScript异步相关的知识，在学到Generator（生成器函数）、Promise 和 async-awiat 等相关对异步优化的内容时遇到了一些一时没有理解的东西。本文仅作为学习过程中的笔记分享，第一次发文章，如果错误请不吝指出。 话不多说，进入正题，先写一下在 Generator 中要用到的函数，随便写几个就行。 function getValue(val, duration){ return new Promise(resolve => { setTim
javascript未来的函数：生成器和promise
且听真言
12-30 406
1.通过生成器让函数持续执行。 2.使用promise处理异步任务。 3.使用生成器和promise书写优雅代码。 ES6语言特性：生成器(generator)和promise(promise) 生成器（generator）是一种特殊类型的函数。当从头到尾运行标准函数时，它最多只生成一个值。然而生成器函数会在几次运行请求中暂停，因此每次运行都可能会生成一个值。虽然生成器对JavaScrip...
ES 生成器Generator函数
hr226的博客
08-03 341
ES6—generator生成器函数： 1、普通函数：函数开始执行到执行结束，不能暂停；generator函数：函数执行时，中间可以暂停； <script> function* show() { // 注意：*的位置可以贴着函数名function *show(){}, 也可以不贴着function * show(){}, 但是不能连着function*show(){...
Promise的基础使用与生成器配合Promise解决回调地狱
TimerWki的博客
01-06 838
经过几天对Promise的了解，希望可以帮助到大家。 什么是回调地狱 说起回调地狱 首先想到的是异步在js中我们经常会大量使用异步回调，常用的ajxa请求 来看下面这段代码： function a(functionb(){ c(function d(){ }) }) 个人会觉得这种括号里面套括号看着会很不服，使得代码看起来很混乱。 如何解决这种问题 在ES6中有个叫Promise,也是为了解决回调地狱这种现象 Promise的基础...
ES6 Generator和Promise
狗头苏丹的博客
07-18 494
Generator是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator 理解为一个状态机，封装了多个内部状态。执行Generator 函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。 Promise是一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数，可以链式调用降低了操作难度。
es6 Promise,生成器函数，async
m0_57479235的博客
04-26 180
生成器函数 简单使用： // 生成器就是一个特殊的函数 // 异步编程 纯回调函数 node gs ajax mongodb function* gen() { // console.log(111); yield '一只没有耳朵'; // console.log(222); yield '一只没有尾巴'; // console.log(333); yield '真奇怪'; // console.lo
生成器 + Promise
qq_51025561的博客
04-13 127
function request(url) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(url) }, 2000) }) } function* getData() { const res1 = yield request("张三") const res2 = yield request(res1 + " 李四") const res3 = yiel
ES6语法大全：新特性和实战指南
Generator函数提供了一种生成器表达式的语法，使得异步代码看起来更像同步，而Promise则用于协调异步操作的流程控制。 4. **类和面向对象**： - Class语法的引入使得JavaScript具备了面向对象编程的能力，包括构造...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值