20、promise與ajax jsonp

一.Promise的做用是什麼? 當有多個請求之間有相互依賴關係（緊接着的請求須要上一次請求的返回結果），這時promise的做用就凸顯出來了。
二.如何使用promise?

new  Promise(function(resolve,reject){
                1.處理語句
                if(處理成功){
                    resolve([參數]);
                }else{
                    reject([參數]);
                }
            });

三.promise的兩個原型方法(對方方法) then(),catch() 1.當前promise對象標誌成resolve狀態時,調用 then(function([參數]){處理語句})
2.當前promise對象標誌成reject狀態時,調用catch(function([參數]){處理語句})
四.Promise.all() : 靜態方法 當all中所有promise對象標誌成resolve時,當前對象才返回resolve狀態,不然,只有一個返回reject狀態,當前對象返回reject狀態

//判斷信息爲true時,輸出hello   false時，輸出bye
            function fn(msg){
                //建立promise對象
                let pm = new Promise(function(resolve,reject){ //resolve:表示成功的狀態，reject:表示失敗的狀態
                    if(msg){
                        resolve(); //標誌成功
                    }else{
                        reject(); //標誌失敗
                    }
                });
                return pm;
            }
            var p = fn(1);  //p接收的是調用函數後返回的promise對象
            
            p.then(function(){
                alert('hello');
            });
            p.catch(function(){
                alert('bye');
            });

加載一張圖片

//建立一個數組，存放圖片地址
            const arrImgs = ['img/0.jpg','img/1.jpg','img/2.jpg'];
            //加載圖片
            function loadImg(src){
                return new Promise(function(resolve,reject){
                    //處理加載圖片的過程
                    //Image   建立img對象
                    var img = new Image(); //document.createElement('img');
                    img.src = src;  //給img對象添加src屬性
                    img.onload = function(){
                        resolve(this);
                    }
                    //錯誤事件
                    img.onerror = function(){
                        reject(new Error('圖片加載失敗！'));
                    }
                });
            }
            var oP = loadImg(arrImgs[1]);
            oP.then(function(img){
                document.body.appendChild(img); //當瀏覽器加載圖片成功後，將圖片放到頁面中。
            }).catch(function(err){
                console.log(err);
            })

解決ajax依賴導入的問題
從內容中獲取地址

//獲取頁面元素
            let oBtn = document.getElementById("btn");
            let oDiv = document.getElementById("box");
            oBtn.onclick = function(){
                new Promise(function(resolve,reject){
                    ajax.get('1.txt',function(data){
                        resolve(data);
                    })
                }).then(function(data){
                    return new Promise(function(resolve,reject){
                        ajax.get(data,function(str){
                            resolve(str);
                        })
                    })
                }).then(function(data){
                    ajax.get(data,function(str){
                        oDiv.innerHTML = str;
                    })
                })
            }

==經過對象調用的方法==是對象方法;
==經過構造函數調用的方法==是靜態方法. //Math  
string.fromCharCode()

//經過對象調用的方法，稱爲對象方法
            //經過構造函數調用的方法，稱爲靜態方法 Math     String.fromCharCode()
            const arrImgs = ['img/0.jpg','img/1.jpg','img/2.jpg'];
            function loadImg(src){
                //建立Promise對象
                return new Promise(function(resolve,reject){
                    let img = document.createElement('img');
                    img.src = src;
                    img.onload = function(){
                        resolve(this);
                    }
                    img.onerror = function(){
                        reject('圖片加載失敗！');
                    }
                })
            }
            //Promise.all([]) :數組中返回的promise對象所有是resolve狀態時，當前的promise對象都是resolve狀態；只要有一個返回的是reject,當前的promise對象就是reject狀態。
            
            let oP = Promise.all([loadImg(arrImgs[0]),loadImg(arrImgs[7]),loadImg(arrImgs[2])]);
            oP.then(function(imgs){
                imgs.forEach(function(value){
                    document.body.appendChild(value);
                })
            }).catch(function(str){
                console.log(str);
            })

jsonp 掌握其思想 src屬性：具備跨域的特色

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text" name="txt" id="txt" value="" />
        <ul id='ul1'></ul>
        <script type="text/javascript">
            //src屬性：具備跨域的特色
            //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaaa&cb=
            let otxt = document.getElementById("txt");
            let oUl = document.getElementById("ul1");
            otxt.onkeyup = function(){
                //建立script標籤
                let sc = document.createElement('script');
                //設置src屬性
                sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=fn";
                document.getElementsByTagName('head')[0].appendChild(sc);
            }
            
            
            function fn(data){
//              console.log(data);
                var arr = data.s;
                for(var i = 0,len = arr.length;i < len;i ++){
                    let li = document.createElement('li');
                    li.innerHTML = arr[i];
                    oUl.appendChild(li);
                }
            }
        </script>
    </body>
</html>

轉載於猿2048:➬《20、promise與ajax jsonp》