promise——ES6异步编程

1.promise的基本使用

1.作用：分解异步操作，避免回调函数的嵌套
2.使用：1.创建promise,2.调用then方法
3.状态：等待 成功、失败
4.高级应用

创建promise实例、需要一个回调函数
promise--约定，打赌 resove:成功做什么 reject:失败做什么

let pro = new promise((resolve,reject)=>{

    setTimeout(()=>{
        if('请求成功'){
            resolve('success data');
        }else{
            reject('error data');
        }
    },1000)
})

//调用then
pro.then(
    ()=>{
        console.log('成功了'+ data)
    },
    ()=>{
        console.log('失败了' + data)
    }

);

2.promise使用实例

传统方法

$(function(){
    $.ajax({
        url:'http://localhoset:3000/goos_detail',
        data:{id:2},
        dataType:'json',
        success:function(data){
            console.log(data);
            //请求商品评论
            $.ajax({
                url:'http://localhoset:3000'+data.commentsUrl,
                dataType:'json',
                success:function(data){
                    console.log(data);
                },
                error:function(){
                    console.log('商品评论请求失败')
                }

            })
        },
        error:function(error){
            console.log('商品信息请求失败！')
        }
    })
})

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('商品信息请求失败！')
    }
)

3.高级应用

1.封装方法，返回new Promise对象来发送异步请求，然后调用异步后，定义成功和失败的操作
2.Promise.all
参数：Promise对象的数组
触发的条件：数组中的promise对象都成功
then中的成功方法，取到的参数是一个数组
3.promise.race()
参数：promise对象数组
触发条件：数组中只有一个promise对象成功
then中的成功方法，取到的参数是第一个成功的resove返回的值

 

//加载图片的方法
function getImage(src){
    return new Promise((resove,reject)=>{
        //加载图片的代码
        let img = document.createElement('img');
        img.src = src;
        img.onload = ()=>{
            resove(img);
        }
        img.onerror = (err)=>{
            reject(err);
        }
    });
}

//三张成功后调用异步方法
/*
    promise.all的方法中，需要一个Promise对象的数组，当数组中的每个promise对象都返回resove，才会调用then方法中的函数
*/
Promise.all([
    getImage('http://localhoset:3000/imgage/news.jpg')
    getImage('http://localhoset:3000/imgage/ent.jpg')
    getImage('http://localhoset:3000/imgage/sport.jpg')
]).then(imgs=>{
    imgs.forEach(img=>{
        document.body.appendChild(img);
    })
})

//三张图片只要有一个成功就可以触发
Promise.race([
    getImage('http://localhoset:3000/imgage/news.jpg')
    getImage('http://localhoset:3000/imgage/ent.jpg')
    getImage('http://localhoset:3000/imgage/sport.jpg')
]).then(img=>{
    document.body.appendChild(img);
})