20promise与ajax jsonp

Posted 2020-12-02 飞刀还问情

一.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>