axiosPromise

用来回顾看的

~(function () {
    let formatObj = (obj) => {
        let str = "";
        for (let attr in obj) {
            if (!obj.hasOwnProperty(attr)) return;
            str += `${attr}=${obj[attr]}&`;
        }
        str = str.slice(0, str.length - 1);
        return str;
    };
    let search = url => url.indexOf("?") === -1 ? "?" : "&";
    let axiosPromise = (options) => {
        //Object.assign(_default,options);合并对象
        let _defaults = {
            url:"",
            method: "get",
            async: true,
            cache: true,
            params: {},//get系列传的参数
            data: {},//post系列传的参数
            dataType: "json"
        };
        let {url, method, async, cache, params, data, dataType} = {..._defaults, ...options};
        let regGet = /^(GET|HEAD|DELETE|OPTIONS)$/i;
        let regPost = /^(POST|PUT|PATCH)$/i;
        if (!regGet.test(method) && !regPost.test(method)) return;
        /*既不是get系列也不是post系列*/
        //get系列的并且传了params传参,需要把参数转换成urlencode字符串放在url地址后面
        //http://www.baidu.com ?age=1&name=lucy
        if(regGet.test(method)&&params){
            if(Object.prototype.toString.call(params)==="[object Object]"){
                url+=`${search(url)}${formatObj(params)}`;
            }
        }else{
            data = formatObj(data);
        }
        //get系列若cache=false表示不需要缓存则还需要处理下
        if(regGet.test(method)&&!cache){
            url+=`_=${Math.random()}`;
        }
        return new Promise(function (resolve, reject) {
            //ajax四部
            //创建ajax对象
            let xhr = new XMLHttpRequest();

            //设置链接的链接地址并打开
            xhr.open(method, url, async);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
                    let res = JSON.parse(xhr.responseText);
                    switch (dataType) {
                        case "json":
                            res =JSON.parse(xhr.responseText) ;
                            break;
                        case "xml":
                            res = xhr.responseXML;
                            break;
                    }
                    resolve(res);
                }
                if (xhr.readyState === 4 && /^(4|5)\d{2}$/.test(xhr.status)) {
                    reject(xhr, xhr.status, xhr.statusText);
                }
            };

            if(regGet.test(method)){
                xhr.send(null);
            }else{
                xhr.send(data);
            }
        })
    };
    ["get","head","delete","options"].forEach((item,index)=>{
        //这些根据请求类型封装的方法,核心逻辑和axiosPromise一样,只有方法运行时传的参数不一样
        axiosPromise[item] = function(url,options){
            options = {
                ...options,
                url: url,
                method: item
            };
            return axiosPromise(options);
        }
    });
    ["post","put","patch"].forEach((item,index)=>{
       axiosPromise[item] = function(url,data,options){
           options = {
               ...options,
               url: url,
               data: data,
               method: item
           };
           return axiosPromise(options)
       }
    });
    window.axiosPromise = axiosPromise;
})();


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值