使用async与await封装ajax请求

发布时间：2022-08-19 13:44
封装ajax 的es6升级版
<!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('POST', 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("接口名").then(value=>{
        //     console.log(value);
        // }, reason=>{})
  
 
 
        // async与await 测试axios
        
        async function main(){
            //发送 AJAX 请求
            let result = await sendAJAX("接口名");
 
            console.log(result);
        }
 
        main();
        
    </script>
</body>
 
</html>
使用async与await封装ajax请求

相关推荐
