promise封装ajax向服务器发送请求

最新推荐文章于 2022-12-11 14:38:50 发布

西伯利亚狼ow

最新推荐文章于 2022-12-11 14:38:50 发布

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sssssboer/article/details/124460116

版权

JavaScript通过XMLHttpRequest与服务器进行Http通信。封装Ajax请求，利用open()、send()方法和readyState属性监控请求状态。当readyState为4且状态码在200-299或304时，表示请求成功，否则失败。利用Promise解决异步问题，成功时调用resolve返回响应数据，失败时调用reject。

摘要由CSDN通过智能技术生成

JavaScript没有通讯能力，而浏览器具有通讯能力。

浏览器内建XMLHttpRequest构造函数与服务器取得联系

通过JavaScript操作XMLHttpRequest与服务器取得联系

构造函数XMLHttpRequest有自己的属性方法

浏览器与服务器进行通信，通信协议就为Http协议

XMLHttpRequest属性方法：

1：open（请求方法，URL，是否异步）

2：send（请求体）

3：readyState

Http协议规定了服务器状态码反馈响应：200，304，404....

XMLHttpRequest具有readyState属性来记录响应时处于哪个过程：0，1，2，3，4

0：未调用open（）方法

1：调用open但未调用send（）方法

2：发送请求但未响应

3：收到部分响应

4：响应都接收完成

readyState属性的数字是一直变化的，响应状态码是当次请求响应的数字

readyState属性值的变化会触发readystatechange事件，

则用onreadystatechange来监视readyState属性值的变化，得到响应成功

<body>
    <a>点击获取图片</a>
    <img>
    <script>
        const button = document.querySelector('a');
        const image = document.querySelector('img');

        function ajaxPromise(){
            let promise = new Promise( (resolve),(reject) =>{
                let xhr = new XMLHttpRequest();
                xhr.open('get','wang.gif',true);
                xhr.onreadystatechange = () =>{
                    if( xhr.status===4){
                        if( xhr.status >= 200 && xhr.status < 300 || xhr.status ===304){
                            resolve( xhr.responseURL);
                        }else{
                            reject( new Error(xhr.statusText));
                        }
                    }
                };
                xhr.send( null );
            });
            return promise;
        }

        button.addEventListener('click', ()=>{
            ajaxPromise()
                .then(responseURL=>{
                    image.src = responseURL;
                })
                .catch( statusText =>{
                    console.log(statusText);
                });
        });
    </script>
</body>

先获取a链接和img

判断state状态是否为4同时状态码大于等于200小于300的时候表示成功，状态码等于304的时候表示从浏览器缓存里获取资源也可，在这两种情况下执行resolve并传入图片的URL，反之执行reject

返回promise完成封装