Promise实践练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise-Ajax</title>
</head>
<body>
    <button id="btn">点击发送AJAX</button>
    <script>
        const btn = document.querySelector('#btn');
        btn.addEventListener('click',async function(){
            let duanzi = await sendAJAX('http://api.apiopen.top/getJoke');
            console.log(duanzi);
        })


        function sendAJAX(url){
            return new Promise((resolve,reject)=>{
                //    原生ajax请求
                //    第一步：创建对象
                const xhr= new XMLHttpRequest();
                //    第二步：初始化
                xhr.open('GET',url);
                //    第三步：发送
                xhr.send();
                //    第四步：处理响应结果
                xhr.onreadystatechange=()=>{
                    if(xhr.readyState===4){
                        if(xhr.status>=200 && xhr.status<300){
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });

            sendAJAX('http://').then((value)=>{
                console,log(value);
            },(reason)=>{
                console.log(reason);
            })
        }
    </script>
</body>
</html>