ajax 异步封装（Promise）-CSDN博客

本文链接：https://blog.csdn.net/qq_42680313/article/details/105639322

原生 js 实现；

onload 中之所以还要再进行状态码的验证，实际上是为了验证在网络通畅情况下，服务器发送的是否是正确数据；
onerror 则是用于判断网络是否中断的错误，不能用 onerror 来取代 onload 中的状态验证，两者针对完全不同的错误情况；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>提交</button>
    <script>
        function Ajax(request) {

            return new Promise(function (res, rej) {
                let xhr = new XMLHttpRequest();
                xhr.open(request.method, request.url);
                let data = request.data;
				
                xhr.onload = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        res(xhr);
                    } else if (xhr.readyState === 4 && xhr.status !== 200) {
                        rej(xhr);
                    }
                }

                if (request.method === 'POST') {
                    if (request.header) {
                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                    } else {
                        xhr.setRequestHeader('Content-Type', 'application/json');
                        data = JSON.stringify(request.data);
                    }
                    xhr.send(data);

                } else if (request.method === 'GET') {
                    xhr.send();
                }


            })
        }

        const request_form = {
            method: 'GET',
            url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video',
        }

        // const request_form = {
        //     method: 'POST',
        //     url: 'http://localhost:3000/json',
        //     data: {
        //         name: 'zhangsan',
        //         age: 30
        //     }
        // }

        const btn = document.querySelector('button');

        function test(request_form) {
            const first_request = Ajax(request_form);
            first_request.then(function (res) {
                const data = JSON.parse(res.response);
                console.log(data);
            }).catch(function (rej) {
                console.log(rej);
            })
        }

        btn.addEventListener('click', test.bind(this, request_form))

    </script>
</body>

</html>