满足promise规则的ajax

作者: 罗斯福 | 来源:发表于2019-12-25 00:57 被阅读0次

封装 jQuery.ajax
满足promise规则的ajax
升级你的 jQuery.ajax 满足 Promise 规则
ES6异步请求
手写ajax
Promise封装_AJAX
Ajax
封装AJAX，以及使用promise
ES6
promise

规范Ajax

promise的使用规则为：

new Promise( function(resolve, reject) {...} /* executor */  );
jQuery.ajax({
    url: '/xxx',
    method: 'get'
}).then(success, fail)//resove状态则执行success,reject状态则执行fail

因为.then()和.catch()返回promise对象，所以可以被链式调用

image.png

具体的实现实例如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>

<body>
    <button id="button">点我</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>

    <script>
        window.jQuery = function (nodeOrselector) {
            let nodes = {}
            nodes.addClass = function () {}
            nodes.html = function () {}
            return nodes
        }
        window.$ = window.jQuery
        window.promise=function(fn){
            return{
                then:function(){}
            }
        }
        window.jQuery.ajax = function ({
            url,
            method,
            body,
            headers
        }) {
            return new Promise(function (resove,reject)//此处为重点
            {
                let request = new XMLHttpRequest()
            request.open(method, url)
            for (let key in headers) {
                let value = headers[key]
                request.setRequestHeader(key, value)
            }
            request.onreadystatechange = () => {
                if (request.readyState === 4) {
                    if (request.status >= 200 && request.status < 300) {
                        resove.call(undefined, request.responseText)
                    } else if (request.status >= 400) {
                        reject.call(undefined, request)
                    }
                }
            }
            request.send(body)
            })
            
        }

        function f1(responseText) {
            //console.log(JSON.parse(responseText))
          
        }

        function f2(responseText) {
           

        }
        button.addEventListener('click', (e) => {
          
           let promise= window.jQuery.ajax({
                url: '/xxxx',
                method: 'get',
                headers: {
                    'content-type': 'application/x-www-form-urlencoded',
                    'sty': '18'
                }
            })
       
           promise.then(
               (text)=>{console.log(text)},
               (request)=>{console.log(request)}
           )




            //     let request=new XMLHttpRequest()
            //     request.open('get','/xxxx')//配置request
            //     request.send()
            //     request.onreadystatechange=()=>{
            //         if (request.readyState===4) {
            //             console.log('请求响应完毕了')
            //             console.log(request.status)
            //             if(request.status>=200&&request.status<300){
            //              console.log('说明请求成功')
            //              console.log(typeof request.responseText)
            //              console.log(request.responseText)
            //              let string=request.responseText
            //              let object=JSON.parse(request.responseText)
            //              console.log(typeof object)
            //         console.log(object)
            //         console.log('object.note')
            //         console.log(object.note)
            //             }else if(request.status>400){
            //             console.log('说明请求失败')
            //         }
            //     }
            // }

        })
    </script>

</body>

</html>