美文网首页
基于promise处理原生Ajax请求

基于promise处理原生Ajax请求

作者: 小黄不头秃 | 来源:发表于2023-06-07 01:27 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            function queryDate(url){
                var p=new Promise(function(resolve,reject){
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState != 4) return ;
                        if(xhr.readyState == 4 && xhr.status == 200){
                            resolve(xhr.responseText);
                        }else{
                            reject('服务器走丢了');
                        }
                    };
                    xhr.open('get',url);
                    xhr.send(null);
                });
                return p;
            };
            queryDate('http://localhost:3000/data')
            .then (function(data){
                console.log(data);
            },function(info){
                console.log(info);
            });
        </script>
    </body>
    </html>
    

    关于then参数的返回值问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 
            多次发送Ajax请求
            queryDate()
            .then(function(date){
                return queryDate();
            })
            .then(function(date){
                return queryDate();
            })
            .then(function(date){
                return queryDate();
            });
         -->
    
         <!-- 
             then参数的返回值
             (1)返回promise实例对象
                - 返回的该实例对象会调用下一个then
             (2)返回一个普通值
                - 返回的普通值会直接传递给下一个then,通过then参数中的函数接受该值
          -->
          <script>
              var num=0;
            function queryDate(num){
                 return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        resolve(num);
                    },1000);
                    // xhr.open('get',url);
                    // xhr.send(null);
                    }
                    );
            }
            queryDate(1)
            .then (function(data){
                console.log(data);
                 return queryDate(2);
            },function(info){
                console.log("#");
                // console.log(info);
                // return queryDate();
            })
            .then(function(data){
                console.log(data);
                return new Promise(function(resolve,reject){
                    setTimeout(function(){
                        resolve(3);
                    },1000);
                });
            },function(info){
                // console.log(info);
                // return new Promise(function(resolve,reject){
                //     setTimeout(function(){
                //         resolve(23);
                //     },1);
                //     });
                })
            .then(function(data){
                console.log(data);
                return "hello";
            })
            .then(function(data){
                console.log(data);
                console.log(arguments);
            });
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:基于promise处理原生Ajax请求

          本文链接:https://www.haomeiwen.com/subject/pclpedtx.html