工作工具之-函數封裝-http篇

http

/*
    let url = 'http://demo.com/api'
    例: 
        ajax({
            url: url,
            success: function(data) {
    
            }
        })
*/
function ajax(setting){
    //設置參數的初始值
    var opts={
        method: (setting.method || "GET").toUpperCase(), //請求方式
        url: setting.url || "", // 請求地址
        async: setting.async || true, // 是否異步
        dataType: setting.dataType || "json", // 解析方式
        data: setting.data || "", // 參數
        success: setting.success || function(){}, // 請求成功回調
        error: setting.error || function(){} // 請求失敗回調
    }

    // 參數格式化
    function params_format (obj) {
        var str = ''
        for (var i in obj) {
            str += i + '=' + obj[i] + '&'
        }
        return str.split('').slice(0, -1).join('')
    }

    // 創建ajax對象
    var xhr=new XMLHttpRequest();

    // 連接服務器open(方法GET/POST，請求地址， 異步傳輸)
    if(opts.method == 'GET'){
        xhr.open(opts.method, opts.url + "?" + params_format(opts.data), opts.async);
        xhr.send();
    }else{
        xhr.open(opts.method, opts.url, opts.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(opts.data);
    }
    
    /*
    ** 每當readyState改變時，就會觸發onreadystatechange事件
    ** readyState屬性存儲有XMLHttpRequest的狀態信息
    ** 0 ：請求未初始化
    ** 1 ：服務器連接已建立
    ** 2 ：請求已接受
    ** 3 : 請求處理中
    ** 4 ：請求已完成，且相應就緒
    */
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
            switch(opts.dataType){
                case "json":
                    var json = JSON.parse(xhr.responseText);
                    opts.success(json);
                    break;
                case "xml":
                    opts.success(xhr.responseXML);
                    break;
                default:
                    opts.success(xhr.responseText);
                    break;
            }
        }
    }

    xhr.onerror = function(err) {
        opts.error(err);
    }
}


/*
    let url = 'http://demo.com/api'
    例: 
        fetchHttp(url).
            then( res => {
                console.log(res)
            }).catch( e => {
                console.log(e)
            })
        fetchHttp(url, {
            method: 'POST',

        })
*/
function fetchHttp(url, setting = {}) {
    //設置參數的初始值
    let opts={
        method: (setting.method || 'GET').toUpperCase(), //請求方式
        headers : setting.headers  || {}, // 請求頭設置
        credentials : setting.credentials  || true, // 設置cookie是否一起發送
        body: setting.body || {},
        mode : setting.mode  || 'cors', // 可以設置 cors, no-cors, same-origin
        redirect : setting.redirect  || 'follow', // follow, error, manual
        cache : setting.cache  || 'default' // 設置 cache 模式 (default, reload, no-cache)
    }
    let dataType = setting.dataType || "json", // 解析方式  
        data = setting.data || "" // 參數

    // 參數格式化
    function params_format (obj) {
        var str = ''
        for (var i in obj) {
            str += `${i}=${obj[i]}&`
        }
        return str.split('').slice(0, -1).join('')
    }

    if (opts.method === 'GET') {
        url = url + (data?`?${params_format(data)}`:'')
    }else{
        setting.body = data || {}
    }
    return new Promise( (resolve, reject) => {
        fetch(url, opts).then( async res => {
            let data = dataType === 'text' ? await res.text() :
                dataType === 'blob' ? await res.blob() : await res.json() 
            resolve(data)
        }).catch( e => {
            reject(e)
        })
    })
}