自定義封裝fetch

// import 'es5-shim' //由於 IE8 是 ES3,需要引入 ES5 的 polyfill
// require('es6-promise').polyfill(); //支持IE瀏覽器,引入 Promise 的 polyfill
// import 'whatwg-fetch' //解決移動瀏覽器兼容性問題
// import 'fetch-detector' //引入 fetch 探測庫
// import 'fetch-ie8' //引入 fetch 的 polyfill
let baseUrl = ''
export default async(url = '', data = {}, type = 'GET', contentType = 'application/json', method = 'fetch') => {
    type = type.toUpperCase();
    url = baseUrl + url;
    contentType = contentType.toLowerCase();
    if (type === 'GET') {
        let dataStr = '';
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&'
        })
        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr;
    }
    if (window.fetch && method === 'fetch') {
        let requestConfig = {
            credentials: 'include',
            method: type,
            headers: {
                'Accept': 'application/json',
                'Content-Type': contentType
            },
            mode: 'cors',
            cache: 'force-cache'
        }
        if (type === 'POST') {
            if (contentType === 'application/x-www-form-urlencoded') {
                // let formData = new FormData();
                // Object.keys(data).forEach(key => {
                //     formData.append(key, data[key])
                // })
                let dataStr = '';
                Object.keys(data).forEach(key => {
                    dataStr += key + '=' + data[key] + '&'
                })
                dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
                requestConfig.body = dataStr;
            } else if (contentType === 'application/json') {
                requestConfig.body = JSON.stringify(data);
            } else {
                console.log('unkonwn');

            }
        }

        try {
            const res = await fetch(url, requestConfig);
            const dataObj = await res.json();
            return dataObj;
        } catch (error) {
            throw new Error(error)
        }

    } else {
        return new Promise((resolve, reject) => {
            let requestObj;
            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest()
            } else {
                requestObj = new ActiveXObject('Microsoft.XMLHTTP')
            }
            let dataStr = '';
            if (type === 'POST') {
                if (contentType === 'application/x-www-form-urlencoded') {
                    Object.keys(data).forEach(key => {
                        dataStr += key + '=' + data[key] + '&'
                    })
                    dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
                } else if (contentType === 'application/json') {
                    dataStr = JSON.stringify(data);
                } else {
                    console.log('unkonwn');

                }
            }
            requestObj.open(type, url, true);
            requestObj.setRequestHeader('Content-type', contentType);
            requestObj.send(dataStr);
            requestObj.onreadystatechange = function(e) {
                if (e.target.readyState === 4) {
                    if (e.target.status === 200) {
                        let obj = e.target.response
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
                        reject(e.target.status)
                    }
                }
            }
        })
    }
}

示例:

export const login = (data) => {
    return fetch('/login', data, 'POST', 'application/x-www-form-urlencoded')
 };

調用:

login(data).then(res=>{
    console.log(res)
}).catch(error=>{
    console.log(error)
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章