Promise封装原生Ajax

℡╲_俬逩灬. 提交于 2020-01-16 15:06:21
 function ajaxPromise(method,url,data) {
            return new Promise((resolve, reject) => {
                var xhr = null;
                var method = method || 'GET';
                var data = data || null;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }
                xhr.open(method, url, true)

                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)
                        }
                    }
                }

                if(method == 'GET'){
                    xhr.send()
                }else{
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhr.send(JSON.stringify(data));
                }
            })

        }

效果展示:

<button id="btn">click</button>

 $('#btn').click(function () {
            ajaxPromise('GET','http://139.9.107.233:5030/data/data.json',null).catch(err => {
                console.log(err);
            }).then(res => {
                console.log(res)
            })
        })

在这里插入图片描述

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!