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);
})