promise-Generator-async比较——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来执行下一步请求