XMLHttpRequest 封装

Posted 九月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了XMLHttpRequest 封装相关的知识,希望对你有一定的参考价值。

封裝:

export default (type=\'GET\', url=\'\', data={}, async=true) => {
    return new Promise((resolve, reject) => { //定义一个promise
        type = type.toUpperCase();

        let requestObj;
        if (window.XMLHttpRequest) {
            requestObj = new XMLHttpRequest();
        } else {
            requestObj = new ActiveXObject;
        }

        if (type == \'GET\') {
            let dataStr = \'\'; //数据拼接字符串
            Object.keys(data).forEach(key => {
                dataStr += key + \'=\' + data[key] + \'&\';
            })
            dataStr = dataStr.substr(0, dataStr.lastIndexOf(\'&\'));
            url = url + \'?\' + dataStr;
            requestObj.open(type, url, async);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send();
        }else if (type == \'POST\') {
            requestObj.open(type, url, async);
            requestObj.setRequestHeader("Content-type", "application/json");
            requestObj.send(JSON.stringify(data));
        }else {
            reject(\'error type\');
        }

        requestObj.onreadystatechange = () => {
            if (requestObj.readyState == 4) {
                if (requestObj.status == 200) {
                    let obj = requestObj.response
                    if (typeof obj !== \'object\') {
                        obj = JSON.parse(obj);
                    }
                    resolve(obj);
                }else {
                    reject(requestObj);
                }
            }
        }
    })
}

使用:

import ajax from \'../ajax\'

以上是关于XMLHttpRequest 封装的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

XMLHttpRequest 封装

XMLHttpRequest函数封装

封装一个自己的 Ajax小框架

封装一个XMLHttpRequest

回归 | js实用代码片段的封装与总结(持续更新中...)