zoukankan      html  css  js  c++  java
  • promiseGeneratorasync比较——ES6异步编程

    eg.先获取商品详情,在获取商品评论

    // es6 Promise
    let pro = new Promise((resolve,reject)=>{
        $.ajax({
            url:'http://localhoset:3000/goos_detail',
            data:{id:2},
            dataType:'json',
            success:function(data){
                console.log(data);
                //请求商品评论
                resolve(data)
            },
            error:function(error){
                reject();
            }
        })
    });
    
    pro.then(
        data => {
            $.ajax({
                url:`http://localhoset:3000${data.commentsUrl}`,
                dataType:'json',
                success:function(data){
                    console.log(data);
                },
                error:function(){
                    console.log('商品评论请求失败')
                }
    
            })
        },
        error => {
            console.log('商品信息请求失败!')
        }
    )
    //Generator函数
    function* getGoods(){
        //先获取商品详情页
        let commentsUrl = yeild getData('http://localhoset:3000/goos_detail?id=2');
        //再获取商品评论内容
        yield getData(commentsUrl);
    }
    function getData(url){
        $.get(url,(data) => {
            console.log(data);
            //第二次调用next,将商品评论的url传入下一次的yield
            geneGood.next(`http://localhoset:3000${data.commentsUrl}`);
    
        },'json')
    }
    let geneGood = getGoods();
    // 第一次调用next函数,发送请求商品详情的ajax
    geneGood.next();
    
    /*总结:使用Generator函数发送异步请求:
    1.逻辑清晰
    2.避免了回调地狱;
    3.可以灵活的控制各个请求发送的时机*/
    // 3.用async函数
    function getData(url){
        
        return new Promise((resolve,reject)=>{
            $.get(url,data=>{
                console.log(data);
                resolve(`http://localhoset:3000${data.commentsUrl}`);
                //reject("未找到商品评论")
            },'json')
        });
    }
    
    async function getGoods(url){
        const commentsUrl = await getData("http://localhoset:3000/goos_detail?id=2");
        await getData(commentsUrl);
    }
    
    getGoods()

    跟Generator函数的比较
    1.await调用的函数必须返回的是Promise对象
    2.async函数语法语义更加明确,async,await语义更准确;
    3.async函数有内部的自动执行器,不用通过next来执行下一步请求

  • 相关阅读:
    分享jstl实现分页,类似百度分页
    分享git的常用命令
    ubuntu certbot 生成免费泛域名证书
    es创建普通索引以及各种查询
    动态代理
    开闭原则
    单一原则
    单例模式
    设计模式之观察者模式
    SpringBoot集成spring-data-jpa注入Bean失败
  • 原文地址:https://www.cnblogs.com/lisa2544/p/15665757.html
Copyright © 2011-2022 走看看