ajax封装成promise格式接口, 支持get和post操作

ajax请求setTimeout模拟ajax请求

    <script>
       function ajax(url){
           return new Promise(function(resolve,reject){
               setTimeout(()=>{   //setTimeout模拟ajax请求
                var data ={"data": ' 测试项'}
                resolve(data)
                reject(data)
               },300)
           })
       }
       ajax("/xxx").then((data)=>{
           console.log("成功",data)
       }).catch(()=>{
           console.log("失败")
       }).finally(()=>{
           console.log("完毕")
       })
    </script> 

ajax请求 自己建api

    <script>
       function ajax(url){
           return new Promise(function(resolve,reject){
            var xhr = new XMLHttpRequest();
            xhr.open("GET",url);
            xhr.onload = function (event){
                resolve(event.target.response);
            };
            xhr.onerror = function (event){
                reject(event.target.response);
            };
            xhr.send();
           })
       }
       ajax("/AJAX/api.json").then((data)=>{
           console.log("成功",data)
       }).catch(()=>{
           console.log("失败")
       }).finally(()=>{
           console.log("完毕")
       })
    </script> 

peomise封装的get post操作

    <script>
        function get(url){   
            return new Promise((resolve,reject)=>{
                var xhr = new XMLHttpRequest()
                xhr.open('GET', url, true)
                xhr.onreadystatechange = function(){
                    if(this.readyState === 4){
                        if(this.readyState === 200){
                            resolve(this.responseText,this)
                        }else{
                            var reJson = {code:this.status, response:this.response}
                            reject(reJson. this)
                        }
                    }
                }
                xhr.send()
            })
        }
        function post(url, data) {
            return new Promise( (resolve, reject) => {
                var xhr = new XMLHttpRequest()
                xhr.open("POST", url, true)
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status === 200) {
                            resolve(JSON.parse(this.responseText), this)
                        } else {
                            var resJson = { code: this.status, response: this.response }
                            reject(resJson, this)
                        }
                    }
                }

                xhr.send(JSON.stringify(data))
            })
        }
       get("/xxx").then(()=>{
           post("/xxx").then(()=>{
            console.log("pass")
           })
       }).catch(()=>{
            console.log("fail")
       }).finally(()=>{
            console.log("end")
       })
    </script> 

参考视频: https://www.bilibili.com/video/av66986891