Promise_03封装 AJAX

向右看齐 2023-10-06 17:26 56阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Promise 封装 AJAX</title>
        <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <h2 class="page-header">Promise 封装 AJAX 操作</h2>
            <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
        </div>
        
        <script>
            //接口地址 https://api.apiopen.top/getJoke
            //获取元素对象
            const btn = document.querySelector('#btn');
    
            btn.addEventListener('click', function(){
         
                //创建 Promise
                const p = new Promise((resolve, reject) => {
         
                    //1.创建对象
                    const xhr = new XMLHttpRequest();
                    //2. 初始化
                    xhr.open('GET', 'https://api.apiopen.top/getJoke');
                    //3. 发送
                    xhr.send();
                    //4. 处理响应结果
                    xhr.onreadystatechange = function(){
         
                        if(xhr.readyState === 4){
         
                            //判断响应状态码 2xx   
                            if(xhr.status >= 200 && xhr.status < 300){
         
                                //控制台输出响应体
                                resolve(xhr.response);
                            }else{
         
                                //控制台输出响应状态码
                                reject(xhr.status);
                            }
                        }
                    }
                });
                //调用then方法
                p.then(value=>{
         
                    console.log(value);
                }, reason=>{
         
                    console.warn(reason);
                });
            });
        </script>
    </body>
    </html>

### 封装成函数 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Promise封装AJAX操作</title>
    </head>
    <body>
        <script>
            /**
             * 封装一个函数 sendAJAX 发送 GET AJAX 请求
             * 参数   URL
             * 返回结果 Promise 对象
             */
            function sendAJAX(url){
         
                return new Promise((resolve, reject) => {
         
                    const xhr = new XMLHttpRequest();
                    xhr.responseType = 'json';
                    xhr.open("GET", url);
                    xhr.send();
                    //处理结果
                    xhr.onreadystatechange = function(){
         
                        if(xhr.readyState === 4){
         
                            //判断成功
                            if(xhr.status >= 200 && xhr.status < 300){
         
                                //成功的结果
                                resolve(xhr.response);
                            }else{
         
                                reject(xhr.status);
                            }
                        }
                    }
                });
            }
        
            sendAJAX('https://api.apiopen.top/getJok')
            .then(value => {
         
                console.log(value);
            }, reason => {
         
                console.warn(reason);
            });
        </script>
    </body>
    </html>