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