web学习笔记(四十一)

发布于:2024-03-21 ⋅ 阅读:(56) ⋅ 点赞:(0)

目录

1.生成器Generator

2.解决回调地狱的三种方法

3. Promise对象

3.1什么是Promise对象

3.2Promise对象解决异步地狱问题 

3.3Promise对象的三种状态和两个过程

3.4Promise的then方法


1.生成器Generator

       生成器主要用来解决异步操作的问题。是一个异步编程的解决方案,可以防止回调地狱(多层回调函数套在一起的情况)的发生。

    <script>
        // 生成器函数
        // 关键字  yield   中断生成器
        function* Gen() {
            console.log('AAA');
            yield '返回AAA';
            console.log('bbb');
            yield '返回bbb';
            console.log('ccc');
            yield '返回ccc';
        }
        let itertator = Gen()

        console.log(itertator.next()); //返回一个对象Object  
        /* done : false
        value:  "返回AAA "*/

        itertator.next();
        itertator.next();
    </script>
  • 生成器区别于其他函数最关键的一项就是生成其中是有*号的,但是对*号的位置却没有限制,可以写在function前也可以写在function后。
  • 生成器函数返回的结果是迭代器 (iterator)对象,调用迭代器对象的 next 方法可以得到yield 语句后的值
  • 生成器可以传参也可以不传参。
  • 在生成器中  yield关键字有中断、暂停的作用,也可以将yield理解为是一个分隔符,每调用一次next方法,执行一段代码。 yield后面还可以跟一个值或表达式,调用next 方法可以得到
  • next 方法可以传递实参,作为 yield 语句的返回值
     <script>
            function* gen(arg) {
                console.log(111, arg);
                let a = yield 'aaa';
    //此时虽然声明了变量a,但却没有将yield 'aaa'赋值给a,
    //因为系统认定yield 'aaa'的结果是undefined
                console.log(222, a);
    //这个a取到的数值是我们第二次调用next()方法传过来的实参,结果是bab
                let b = yield 'bbb';
                console.log(333, b);
                yield 'ccc';
            }
            let ittt = gen(444);
    
            console.log(ittt.next());
            console.log(ittt.next('bab'));
            console.log(ittt.next('cbc'));
        </script>

2.解决回调地狱的三种方法

  1. 方法一:用生成器来解决
        <script>
            function one() {
                setTimeout(function () {
                    console.log('1');
                    console.log( iii.next());
                   
                }, 2000);
            };
    
            function two() {
                setTimeout(function () {
                    console.log('2');
                    console.log( iii.next());
                }, 500);
            };
    
            function three() {
                setTimeout(function () {
                    console.log('3');
                    console.log( iii.next());
                }, 1000);
            };
    
            function* time() {
                // one();
                yield one();
                // two();
                yield two();
                // three();
                yield three();
    
            };
            let iii = time();
            iii.next();
        </script>
  2. 方法二:Prominse对象中then方法来解决
  3. 方法三:async   await

3. Promise对象

3.1什么是Promise对象

Promise是一个原生对象,他本身就是一个构造函数 ,需要用new Promise(回调函数)来进行实例化,

这个对象和我们之前学习的对象不太一样,他的传参相对来说要复杂一些,Promise对象的参数就相当于一个函数。

let p=new Promise((resolve(成功函数),reject(失败函数))=>{})

3.2Promise对象解决异步地狱问题 

 Promise是异步编程的一种解决方案,相当于一个容器(放的程序是异步代码)它里面保存着某个未来才会结束的事件(比如ajax请求)从语法上说, Promise是一个对象,从它可以获取异步操作的消息。Promise提供统的API,各种异步操作都可以用同样的方法进行处理。

3.3Promise对象的三种状态和两个过程

         Promise对象代表一个异步操作,有三种状态

       三个状态(状态是不可逆):(1)等待状态:pending;(2)成功状态: fulfilled(resolve);(3)失败状态: rejected;

       两个过程:从等待到成功;从等待到失败。

3.4Promise的then方法

        then的第一个参数,就是是用于实现 resolve()方法; 第二个参数,就是用于实现 reject()方法.调用 resolve(); 相当于 执行then 是第一个函数。

    <script>
        let num = Math.floor(Math.random() * 10);
        console.log(num);
        let p1 = new Promise((resolve, reject) => {
            // resolve是一个函数名,成功
            //  reject是一个函数名,失败
            if (num > 5) {
                resolve();
         // resolve 为一个函数,当调用这个函数时promise的状态会从等待到成功
            } else {
                reject();
        // reject也是一个函数 当调用这个函数时promise状态会从等待到失败
            }

        });
        console.log(p1);

        // then()   Promise.prototype.then=
        // then()方法中有两个参数,参数一:是回调函数 (resolve这个函数的实现)
        // 参数二:是回调函数 (reject这个函数的实现)
        p1.then(() => {
            // 这个花括号里面写入的是resolve函数的代码
            console.log('成功');
        }, () => {
            // 这个花括号里面写入的是reject函数的代码
            console.log('失败');
        })
    </script>

 


网站公告

今日签到

点亮在社区的每一天
去签到