ES6 Day04

以你之姓@ 2023-10-13 22:45 22阅读 0赞

> #### 1.Generator ####
> 
> 是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator 理解为一个状态机，封装了多个内部状态。执行Generator 函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。

Generator函数有两个特征：
    1.function关键字与函数名之间有个星号；
    2.函数内部使用yield表达式
    function* helloWorldGenerator(){
         
    	yield '1';
    	yield '2';
    	return '3';
    }
    如上代码有三个状态, '1'、'2'、'3'，一个yield就是一个状态，一个yield就是一个代码运行节点，执行一次迭代器next方法，到第一个yield，再执行一次，到下一个yield。yield后面是每一种状态的描述。通过迭代器对象的next方法控制的代码的向下执行。
    function* test(){
        
        //想要Generato函数有返回值
         3行代码
        return 1
         3行代码
        return 2
        
         3行代码
        return 3 
        3行代码
        return 4
    }
     ### //因为return会阻止后面的代码运行，所以 Generator提供了yield，yiled也是返回值，但是执行一次状态停在了第一个yield ，依次执行next方法，执行下一个yield状态。代码分段执行，一个yield分一段。上一个yield结束是下个状态的开始,下一个状态的结束再执行下一个yield。yield后面的是返回值。最后一个yield可以return返回。
    。function* test(){
        
        //想要Generato函数有返回值
        //Generator状态机管理
         3行代码
        yield 1
         3行代码
        yield 2
         3行代码
        yield 3 
        3行代码
        yield 4
    }
    ### 1.如何创建Generator函数  每个状态之间都是独立的
     function* test(){
        
                // 每一个yield之间状态是独立的
                log();
                yield 1;
                log();
                yield 2;
                log();
                yield 3;
                log();
                yield 4;
                log();
            }
            let result=test();
            console.log(result);//返回的是一个Generator对象，也是一个迭代器对象
            console.log(result.next(1));//接收第一个状态的返回结果 Object { value: 1, done: false } value是yield返回值
            console.log(result.next());//Object { value: 2, done: false }
            function log(){
        
                for(i=1;i<=10;i++){
        
                    console.log(i)
                }
            }
    ### 2.模拟发起异步请求 拿到第一个状态的返回结果再执行第二个状态，状态之间数据传递通过next
     function* test(){
        
                // 每一个yield之间状态是独立的
                log();
                let res=yield 1; //拿res接收yield 1的返回结果 res-->1
                log();
                // 处理res 上一个状态拿到res当前状态想用res通过调用next()是拿不到的,因为它是异步的，只有在下一次状态调用的时候传递参数进去才行
                console.log(res)
                yield 2; 
                log();
                yield 3;
                log();
                yield 4;
                log();
            }
            let result=test();
            console.log(result);//返回的是一个Generator对象，也是一个迭代器对象
            console.log(result.next());//接收第一个状态的返回结果 Object { value: 1, done: false } value是yield返回值
            console.log(result.next());//Object { value: 2, done: false }；//undefined
            // 如果想要在第二个状态调用第一个状态的数据  需要传递数据 传什么 第二个状态的res就是什么 他会作为上一个状态的结果传递给下一个状态
            //
            function log(){
        
                for(i=1;i<=10;i++){
        
                    console.log(i)
                }
            }

function *Generator(){
        
    			let res=yield getData();
    			console.log(res);
    			 // 上一个状态声明变量 下一个状态使用 
    			yield '结束了';
    		}
    		let res=Generator();
    		res.next()
    		async function getData(){
        
    			let response=await axios.get('http://121.199.0.35:8888/index/article/findCategoryArticles');
    			// 如果想要实现数据传递 需要发起第二段程序执行 
    			// 拿上一个状态得返回值作为下一个状态得入口
    			res.next(response.data)
    		}

总结Generator函数
            // 异步编程解决方案  异步代码 同步编写
            function* test(){
        
                let res=yield 1;
                console.log(res);//100 是下方next的参数 
                yield 2;
            }
            let result=test();//拿到的是迭代器对象 
            result.next();
            result.next(100);//拿到的不是yield后面的状态描述
            Async 
            异步函数同步编程
            async function test(){
        
                let res=await $.get();
                console.log(res)
            }

> #### 2.Promise ####
> 
> 是一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数，可以链式调用降低了操作难度

### 实例化
    	Promise构造函数接收一个函数作为参数，也就是回调函数；该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数，reject作为失败的回调函数。Promise对象代表一个异步操作有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。
    ### 2.实例方法
    	定义在Promise.prototype中的方法，通过Promise实例可以直接调用
    	then(res=>{
        }) 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
        	参数：回调函数，回调函数的参数为resolve函数传递过来的值
    		返回值：返回一个新的Promise实例对象，因此可以使用链式调用
        catch(err=>{
        }) 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
        	参数：回调函数，回调函数的参数为reject函数传递过来的值
    		返回值：返回一个新的Promise实例对象，因此可以使用链式调用
        finally()无论异步操作执行成功失败与否，都会执行该回调
        	参数：回调函数
    		返回值：返回一个新的Promise实例对象

// 1.创建promise对象
            let p1=new Promise((resolve,reject)=>{
        
                // resolve,reject是回调函数
                // resolve函数是promise对象最终状态为成功状态
                //reject函数是promise对象最终状态为失败状态
                
                //非异步
                //假设异步操作执行成功，修改promise对象状态为成功状态
                if(3>2){
        
                    resolve('success')
                }else{
        
                    //假设异步操作执行失败，修改promise对象状态为失败状态
                    reject('error')
                }
            })
            //如何提供resolve和reject函数
           //在promise原型里有then和catch
            // 1.then方法表示的是成功之后的回调，对应resolve
            // 2.catch方法表示的是失败之后的回调，对应reject
            p1.then((res)=>{
        
                console.log(res,'成功回调')
            }).catch((error)=>{
        
                console.log(error,'失败回调')
            }).finally(()=>{
        
                console.log('最终执行')
            })
    		//如果then里面传了两个回调函数,第一个代表成功之后的回调，第二个代表失败之后的回调,分别代表resolve()和reject()
    		p1.then((res)=>{
        
                console.log(res,'成功')
            },(err)=>{
        
                console.log(res,'失败')
            });

> 静态方法 只能由构造函数本身去调用
> 
> 定义在Promise中的方法，通过Promise可以直接调用
> 
> Promise.all(\[p1,p2\])
> 
> 参数：数组，数组中的元素为Promise实例
> 
> 返回值：Promise实例,当p1,p2状态都为fulfilled时候，该实例的状态才为fulfilled，此时p1，p2的返回值组成一个数组，传递给该实例的回调函数；只要p1，p2的返回值有一个变为rejected，该实例状态为rejected;
> 
> Promise.race(\[p1,p2\]) 赛跑返回先请求成功的实例
> 
> 参数：数组，数组中的元素为Promise实例  
> 返回值：Promise实例,当p1,p2之中有一个实例率先改变状态，该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给该实例的回调函数。
> 
> Promise.any(\[p1,p2\])  
> 参数：数组，数组中的元素为Promise实例  
> 返回值：Promise实例,只要p1,p2状态有一个变为fulfilled，该实例的状态为fulfilled；p1，p2状态都变为rejected，该实例状态才为rejected

考虑到可能有多个请求需要发送，需要创建多个承诺对象，所以采用工厂函数进行封装
    function promise(url) {
        
    			return new Promise((resolve, reject) => {
        
    				let xhr = new XMLHttpRequest();
    				xhr.open('get', url);
    				xhr.send();
    				xhr.onreadystatechange = function () {
        
    					if (xhr.readyState === 4) {
        
    						if (xhr.status === 200) {
        
    							resolve(xhr.responseText)
    						} else {
        
    							reject(xhr.responseText)
    						}
    					}
    				}
    			})
    		}
        let p1=getPromise('http://121.199.0.35:8888/index/article/findCategoryArticles');
        let p2=getPromise('http://121.199.0.35:8888/index/carousel/findAll');
        // p1.then((res)=>{
        
        //     console.log(res,'1111111')
        // })
        // p2.then((res)=>{
        
        //     console.log(res,'222222')
        // })
        // all 只有两个异步操作请求都成功才会返回成功的结果，否则返回失败对象
        // race 谁的响应先拿到用谁的结果 无论成功与否
        //any 有成功用成功的，都失败就失败
        let p=Promise.any([p1,p2]);
        p.then((res)=>{
        
            console.log(res)
        }).catch((err)=>{
        
            console.log(err)
        })

//setTimeout第二个参数可以省略，默认为0
    setTimeout(function () {
        
      console.log('1');
    })
    new Promise(function (resolve) {
        
      console.log('2');
      resolve();
    }).then(function () {
        
      console.log('3');
    })
    console.log('4');
    
    
    async function async1() {
        
      console.log(1);
      const result = await async2();
      console.log(3);
    }
    async function async2() {
        
      console.log(2);
    }
    Promise.resolve().then(() => {
        
      console.log(4);
    });
    setTimeout(() => {
        
      console.log(5);
    });
    async1();
    console.log(6);