用原生js封装了一个ajax请求方法_js 封装请求方法,成功返回值-CSDN博客

本文链接：https://blog.csdn.net/ysh83737/article/details/84314080

实现功能

可以实现常用的get/post请求
支持text/json/xml几种返回数据类型
返回的是一个Promise对象

参数：`options`

url: 请求地址
dataType: 数据格式，text/json/xml，默认text，不区分大小写
method: 请求方式，默认get，不区分大小写
data: 请求参数，oject类型

注意：get请求若需带参数，参数仍丢入data属性，自动拼接url

测试：

写了两个简单的php程序测试了post和get请求
请求了4种不同类型数据的本地文件，包括：数组、对象、文本、xml

不足之处

除常用的post/get请求外，其他请求方式不熟悉，没测试过，可能会不适用
方法返回的是Promise对象，不是最终结果（以后有空再琢磨）

代码

ajax代码

这段代码是封装的方法主体，注意的是，请求方法返回的是Promise对象。

myAjax.js

/**
 * ajax请求
 * @description 自己写的ajax请求
 * @param {Object} options 请求配置信息
 * @param {String} options.url 请求地址
 * @param {String} options.dataType 数据格式 json/text/xml
 * @param {String} options.method 请求方式，默认get
 * @param {Object} options.data 请求参数，json格式
 * [options={url, dataType, method}]
 * @returns {Object} 返回一个Promise对象
 */
function myAjax(options) {
    function transformData(object){
        let oStr = '';
    　　for(var key in object){
    　　　　oStr += key+"="+object[key]+"&";
    　　};
    　　return oStr.slice(0,-1);
    };
    return new Promise(function (resolve, reject) {
        let method = options.method ? options.method.toUpperCase() : 'GET';
        let xhr = new XMLHttpRequest();//创建请求对象
        if (method === 'POST') {
            xhr.open(method, options.url);//连接服务器
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post请求添加请求头
            xhr.send(transformData(options.data));//发送请求，带处理过的参数
        } else if(method === 'GET') {
            let url = options.data ? options.url + '?' + transformData(options.data) : options.url;
            xhr.open(method, url);//get请求url需要拼接参数
            xhr.send();
        } else {//其他请求方式
            xhr.open(method, options.url);
            xhr.send();
        };
        //接收返回结果
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (
                    (xhr.status >= 200 && xhr.status < 300) ||
                    xhr.status === 304
                ) {
                    let dataType = options.dataType || 'TEXT',
                        data = null;
                    switch (dataType.toUpperCase()) {
                        case 'JSON':
                            data = JSON.parse(xhr.responseText);
                            break;
                        case 'TEXT':
                            data = xhr.responseText;
                            break;
                        case 'XML':
                            data = xhr.responseXML;
                            break;
                    };
                    resolve(data);
                } else {
                    reject({
                        statusCode: xhr.status,
                        msg: '请求错误'
                    });
                }
            };
        }
    });
};

测试代码

分别测试了get/post请求，用两个Promise.all获取最终的结果。

测试的文件和php代码，感兴趣可以到我的github获取一下

//测试用例

//post请求
let ajax_post = myAjax({url:'program/test_post.php', method:'POST', dataType: 'json', data: {name:'ysh',age:23}});
//get请求
let ajax_get = myAjax({url:'program/test_get.php', method:'GET', dataType: 'json', data: {name:'ysh',age:23}});
Promise.all([ajax_post, ajax_get]).then(res => {
    console.log(res);
}).catch( err => {
    console.log('请求出错了', err);
});

//资源get请求
let arr = myAjax({url:'data/arr.txt', dataType: 'json'}),
    json = myAjax({url:'data/json.txt', dataType: 'json'}),
    text = myAjax({url:'data/text.txt', dataType:'text'}),
    xml = myAjax({url:'data/xmlData.xml', dataType:'xml'});
Promise.all([arr, json, text, xml]).then(res => {
    console.log(res);
}).catch(err => {
    console.log('请求出错了', err);
});