async与await封装ajax请求

柔光的暖阳◎ 2022-10-11 00:51 150阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发送 AJAX 请求</title>
    </head>
    
    <body>
        <script>
            // 发送 AJAX 请求, 返回的结果是 Promise 对象
            function sendAJAX(url) {
                return new Promise((resolve, reject) => {
                    //1. 创建对象
                    const x = new XMLHttpRequest();
                    //2. 初始化
                    x.open('GET', url);
                    //3. 发送
                    x.send();
                    //4. 事件绑定
                    x.onreadystatechange = function () {
                        if (x.readyState === 4) {
                            if (x.status >= 200 && x.status < 300) {
                                //成功啦
                                resolve(x.response);
                            }else{
                                //如果失败
                                reject(x.status);
                            }
                        }
                    }
                })
            }
        
    
            //promise then 方法测试
    
            // sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
            //     console.log(value);
            // }, reason=>{})
      
    
    
            // async与await 测试axios
            
            async function main(){
                //发送 AJAX 请求
                let result = await sendAJAX("https://api.apiopen.top/getJoke");
    
                console.log(result);
            }
    
            main();
            
        </script>
    </body>
    
    </html>

如上图所示，封装ajax的升级版，使用async函数，更加方便；