理解

* Promise對象: 代表了未來某個將要發(fā)生的事件(通常是一個異步操作)
* 有了promise對象, 可以將異步操作以同步的流程表達(dá)出來, 避免了層層嵌套的回調(diào)函數(shù)(俗稱'回調(diào)地獄')
* ES6的Promise是一個構(gòu)造函數(shù), 用來生成promise實例

promise 狀態(tài)

pending   進(jìn)行中  ->  初始化 new promise對象時
fulfilled 成功    ->  調(diào)用resolve
rejected  失敗    ->  調(diào)用reject

決議: 狀態(tài)一旦改變就不可修改
pending->fulfilled 成功
pending->rejected 失敗

使用promise基本步驟(2步):

<script type="text/javascript">
// 1.創(chuàng)建promise對象
let promise = new Promise((resolve, reject) => {
    //初始化promise狀態(tài)為 pending
    //執(zhí)行異步操作
    if(異步操作成功) {
        resolve(value);//修改promise的狀態(tài)為fullfilled
    } else {
        reject(errMsg);//修改promise的狀態(tài)為rejected
    }
})
// 2. 調(diào)用promise的then()
promise.then(
    result => console.log(result),
    errorMsg => alert(errorMsg)
)
</script>

promise 執(zhí)行流程 - 異步與同步

1 new promise傳遞的回調(diào)函數(shù), 里面的代碼是同步執(zhí)行 (定時器,ajax只執(zhí)行聲明,懂?)
2 then里的回調(diào)函數(shù) 是異步執(zhí)行 , 看定時器內(nèi)部的執(zhí)行順序

let  promise = new Promise((resolve,reject)=>{
    console.log(1)
    setTimeout(()=>{
        console.log(4);
            
        resolve('6 哈哈 ');//修改promise的狀態(tài)為成功

        console.log(5);
        // reject('呵呵 ');//修改promise的狀態(tài)為失敗
    },2000);
});
console.log(2);
    
promise.then((data)=>{
    console.log(data+'成功');
},(data)=>{
    console.log(data+'失敗');
})
console.log(3);

p.then(()=>{
    //這里都是異步執(zhí)行的代碼
})

.then()
.catch()
.

Promise.all()

//將多個promise對象合并成一個新的promise對象, 調(diào)用resolve傳遞的數(shù)據(jù)會整合成一個數(shù)組
//只有p1、p2、p3的狀態(tài)都為成功，p的狀態(tài)才會為成功
//只要p1、p2、p3之中有一個被失敗，p的狀態(tài)就變成失敗
//參數(shù)若為空數(shù)組的話，會決議為成功
let p = Promise.all([p1,p2....]);
p.then((data)=>{
  data // [data1,data2,....]
})

Promise.race()

//將多個promise對象合并成一個新的promise對象
//一旦p1,p2,p3誰最先決議為 resolve或者reject那么新的promise就是 成功或者失敗
let p = Promise.all([p1,p2....]);
p.then((data)=>{
  data // p1data1
})

案例

<script type="text/javascript">
    //定義一個請求news的方法
    function getNews(url) {
        //創(chuàng)建一個promise對象
        let promise = new Promise((resolve, reject) => {
            //初始化promise狀態(tài)為pending
            //啟動異步任務(wù)
            let request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if(request.readyState === 4){
                    if(request.status === 200){
                        let news = request.response;
                        resolve(news);
                    }else{
                        reject('請求失敗了。。。');
                    }
                }
            };
            request.responseType = 'json';//設(shè)置返回的數(shù)據(jù)類型
            request.open("GET", url);//規(guī)定請求的方法，創(chuàng)建鏈接
            request.send();//發(fā)送
        })
        return promise;
    }

    getNews('http://localhost:3000/news?id=2')
            .then((news) => {
                console.log(news);
                document.write(JSON.stringify(news));
                console.log('http://localhost:3000' + news.commentsUrl);
                return getNews('http://localhost:3000' + news.commentsUrl);
            }, (error) => {
                alert(error);
            })
            .then((comments) => {
                console.log(comments);
                document.write('<br><br><br><br><br>' + JSON.stringify(comments));
            }, (error) => {
                alert(error);
            })
</script>

</body>

</html>