Generator生成器函数

 <script>
        //三个ajax异步的请求要保证执行的顺序
        //1. 传统的callback触发回调地狱  痛苦  处理异步任务按照顺序  异步-->同步化执行 代码的可读性更好
        //2. promise  then  then语义化明显
        //3.Generator生成函数
        //4.async await 
        //ajax函数 xhr
        //XHR代表 "XMLHttpRequest"，是一种用于在Web浏览器和服务器之间发送HTTP请求和接收响应的API。它是一种基于事件驱动的技术，允许客户端通过JavaScript与服务器进行异步通信，而无需刷新整个页面。

        //通过使用XHR对象，开发者可以发送各种类型的HTTP请求，例如GET、POST和PUT等。XHR还支持异步请求，这意味着浏览器可以在等待服务器响应时继续执行其他操作，而不会阻塞用户界面
        // function ajax(url, fn) {
        //     let xhr = new XMLHttpRequest();
        //     xhr.open('GET', url);
        //     xhr.onreadystatechange = function() {
        //         ///4请求完全到达的状态并且请求成功的状态
        //         if (xhr.readyState === 4 && xhr.status == 200) {
        //             fn(JSON.parse(xhr.responseText))
        //         }
        //     }
        //     xhr.send()
        // }
        // ajax('https://api.github.com/users/wesbos', function(result) {
        //     console.log(result);
        //     ajax('https://api.github.com/users/wesbos', function(result) {
        //         console.log(result, '222');
        //         ajax('https://api.discogs.com/artists/51988', function(result) {
        //             console.log(result, '333');

        //         })
        //     })
        // })

        //假如有这么一个函数async()=》{}
        //不止执行一次  
        //生成器函数Generator function（async出现之前出现过，仅作为了解）
        //"yield" 这个关键字通常用于生成器函数或异步操作中，生成器函数可以通过 "yield" 关键字来暂停执行并向调用者返回一个值，而不是一次性执行完整个函数。这在处理需要逐步获取结果的异步操作或大量数据时非常有用。
        function* foo(x){
          console.log('1');
          yield x+1 //返回，记录下执行状态
          console.log('2');
          yield x+2
          console.log('3');
          return x+3
        }
        let steps = foo(1)//执行器 ，通过调用next()方法来逐步获取生成器函数中产生的值
       // console.log(steps.next());
        // console.log(steps.next());
        // console.log(steps.next());
        // console.log(steps.next());
        //或者使用以下es6的方法
        for(let x of steps){
          console.log(x );
        }

    </script>

运行结果：

ok,投入实践

 //这个写法解决promise回调地狱的问题
        function ajax(url) {
            fetch(url) //promise二进制流
      			.then(data => data.json()) //promise将响应的二进制流转换为 JSON 格式，返回一个新的 Promise 对象
                .then(data => dataGen.next(data))//将获取到的数据传递给生成器函数中的下一个 yield 语句
        }//自动调用next方法了

        function* steps() { //生成器函数
            console.log('fetching beers');
            const beers = yield ajax('https://api.github.com/users/wesbos')
            console.log(beers);
            const wes = yield ajax('https://api.github.com/users/wesbos')
            console.log(wes);
            const fatJoe = yield ajax('https://api.discogs.com/artists/51988')
            console.log(fatJoe);
        }
        const dataGen = steps()
        dataGen.next();