Promise实现ajax

Posted 2021-01-13 shaokevin

利用Promise实现ajax

 

GET

    function getAjax(url) {
        return new Promise((resolved,rejected)=>{
            //创建ajax对象
            let ajax = new XMLHttpRequest();
            //配置参数
            ajax.open(‘get‘,url,true)
            //发送请求
            ajax.send();
            //请求成功之后
            ajax.onload = function () {
                if(this.status === 200){
                    console.log(ajax.responseText)
                    resolved(ajax.responseText);
                }else{
                    rejected();
                }

            }
        })
    }

View Code

getAjax(url).then().catch()

 

POST

    function postAjax(url,param) {
        return new Promise((resolved,rejected)=>{
            //创建ajax对象
            let ajax = new XMLHttpRequest();
            //配置参数
            ajax.open(‘post‘,url,true);

            //设置请求头，表示我传递的参数的类型
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //发送请求，并将数据传递过去
            ajax.send(JSON.stringify(data));

            //请求成功之后
            ajax.onload = function () {
                if(this.status === 200){
                    console.log(ajax.responseText)
                    resolved(ajax.responseText);
                }else{
                    rejected();
                }

            }
        })
    }

View Code

getAjax(url,param).then().catch()

 

GET POST合并

    function myAjax(type,url,params) {
        return new Promise((resolved,rejected)=>{

            //创建ajax对象
            let ajax;
            //注意，不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个javascript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。
            if (window.XMLHttpRequest) {
                ajax = new XMLHttpRequest();
            } else {
                ajax = new ActiveXObject(‘Microsoft.XMLHTTP‘);
            }


            if(type == ‘get‘ || type == ‘‘){//get
                //配置参数
                ajax.open(‘get‘,url,true)
                //发送请求
                ajax.send();
            }else if(type == ‘post‘){//post
                //配置参数
                ajax.open(‘post‘,url,true);
                //设置请求头，表示我传递的参数的类型
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //发送请求，并将数据传递过去
                ajax.send(JSON.stringify(data));
            }

            //请求成功之后
            request.onreadystatechange = function (){
                if (request.readyState === 4){
                    if(this.status === 200){
                        console.log(ajax.responseText)
                        resolved(ajax.responseText);
                    }else{
                        rejected();
                    }
                }
            }

        })
    }

View Code

    getAjax(‘get‘).then().catch()
    getAjax(‘post‘,param).then().catch()