• 【ES6】Generator+Promise异步编程


    一、概念

    首先我们要理解Generator和Promise的概念。

    Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态。

    *Foo(){
        yeild console.log('step1');
        yeild console.log('step2');
    }
    
    run(foo){
        var step = foo();
        while(!step.done){
            step.next();
        }
    }
    
    run(Foo);
    
    // step1
    // step2
    

    通过上面这个例子可以看到,使用*将Foo声明为Generator函数,然后再执行Foo的时候,不会执行到底,而是执行到第一句yeild就停下来。只有调用next()才会执行到下一步yeild。

    Promise:是ES6新增的一个对象,相当于一个容器,是用来专门处理异步处理的。

    function request = new Promise((resolve,reject) => {
        $.ajax({
            type: "GET",
            url: "/someajaxurl",
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                resolve(data);
            },
            error: function (xhr) {
                reject(xhr);
            }
        });
    }).then(data=>{
        // success  method
    }).catch(xhr=>{
        // error method
    });

    二、Generator和Promise的结合

    假设我们有个需求,需要调用两个接口,并且这两个接口不能同时启动异步调用,而是要先调接口1,在调接口2。

    那么在没有使用Generator的情况下是这么写的。

    // 使用promise异步调用数据
    request(url){
    	return new Promise((resolve,reject) => {
    		$.ajax({
    	        type: "GET",
    	        url: "/someajaxurl",
    	        contentType: "application/json",
    	        dataType: "json",
    	        success: function (data) {
    	            resolve(data);
    	        },
    	        error: function (xhr) {
    	            reject(xhr);
    	        }
    	    });
    	});
    }
    
    // 先调用接口1,再点用接口2
    gen(){
    	var nameList = [];
    	request('user/name1').then(data => { 
    		nameList.push(data) ;
    		request('user/name2').then(data => { 
    			nameList.push(data) 
    		});
    	});
    }
    
    gen();
    

    以上例子会发现最终会有一个长嵌套的回调函数。

    如果我们使用Generator的话,那么代码如下:

    // 使用promise异步调用数据
    request(url){
    	return new Promise((resolve,reject) => {
    		$.ajax({
    	        type: "GET",
    	        url: "/someajaxurl",
    	        contentType: "application/json",
    	        dataType: "json",
    	        success: function (data) {
    	            resolve(data);
    	        },
    	        error: function (xhr) {
    	            reject(xhr);
    	        }
    	    });
    	});
    }
    
    
    // 使用generator,将回调函数嵌套的写法改为同步写法
    *gen(){
    	var nameList = [];
    	yeild request('user/name1').then(data => { nameList.push(data) });
    	yeild request('user/name2').then(data => { nameList.push(data) });
    }
    
    // 执行generator的next方式
    (function(){
    	var step = gen();
    	while(!step.done){
    		step.next();
    	}
    });
    

    使用generator的写法,会发现省去一大堆的嵌套,代码变得直观很多。

    三、Async

    上面的例子,发现代码变得直观了,但是还需要另外写个方法去执行generator。这时候ES6中的新特性Async,还可以对代码做进一步的优化。

    // 使用async,效果和generator差不多,只不过将函数内部的yeild改为await.但是async自带执行器,不需要另外再写个方法去执行next.
    async gen(){
    	var nameList = [];
    	await request('user/name1').then(data => { nameList.push(data) });
    	await request('user/name2').then(data => { nameList.push(data) });
    }
    

      

  • 相关阅读:
    golang mod 导包
    grpc client 报错: code = Unimplemented desc = method *** not implemented
    golang读取email
    docker 使用
    在word中批量更改Mathtype公式的格式
    word中插入myth type公式行距变大的问题
    word中编辑论文公式对齐问题
    向别人学习
    机器学习 博文汇总
    matlab中如何用rand产生相同的随机数
  • 原文地址:https://www.cnblogs.com/nonkicat/p/7372532.html
Copyright © 2020-2023  润新知