@jxstjh/jhvideo/src/core/httpClient.js

HTML5 jhvideo base on MPEG2-TS Stream Player

/**
 *@description: 网络类的封装
 *@author: jsyang
 *@date: 2021-06-03 13:56:31
*/
export default {
    //GET请求
    get(url, data = null, headers = null) {
        // return this.ajax('GET', url, null);
        return this.fetch('GET', url, data, headers);
    },

    //POST请求
    post(url, data = null, headers = null) {
        return this.fetch('POST', url, data, headers);
    },

    //PUT请求
    put(url, data = null, headers = null) {
        // return this.ajax('PUT', url, data);
        return this.fetch('PUT', url, data, headers);
    },

    //Delete请求
    del(url, data = null, headers = null) {
        // return this.ajax('DELETE', url, data);
        return this.fetch('DELETE', url, data, headers);
    },

    ajax(method, url, data, headers) {
        return new Promise((resolve, reject) => {

            let xhr = new XMLHttpRequest, params = [];
            xhr.responseType = 'json';// 指定返回类型

            xhr.onload = () => {
                switch (xhr.status) {
                    case 200: resolve(xhr.response); break;
                    case 204: resolve(); break;
                    case 401:// 401登录失败处理
                        //do something
                        reject();
                        break;
                    default: reject({ status: xhr.status, res: xhr.response });
                }
            };

            xhr.open(method, url, true);
            if (!headers) {
                xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');// 设置content-type
            } else {
                Object.entries(headers).forEach(([k, v]) => {
                    xhr.setRequestHeader(k, v);// 设置content-type
                })
            }
            const ct = headers['Content-Type'] || headers['content-type'] || headers['Content-type']
            if (ct.indexOf('x-www-form-urlencoded') >= 0) {
                const str = ''
                Object.keys(data).forEach((k, index) => {
                    str += (index === 0 ? `${k}=${data[k]}` : `&${k}=${data[k]}`)
                })
                data = str
            } else if (data.constructor === FormData) {
                xhr.setRequestHeader('Content-Type', 'multipart/form-data;')
                data = data
            } else {
                if (data) {// 将参数编码成表单的键值对形式
                    // for (let k in data) params.push(`${encodeURIComponent(k)}=${encodeURIComponent(data[k])}`);
                    // data = params.join('&');
                    data = JSON.stringify(data)
                }
            }

            // xhr.withCredentials = true;// 支持跨域发送cookies
            xhr.send(data);
        });
    },

    fetch(method, url, data, headers) {
        if (window && !window.fetch) { return this.ajax(method, url, data, headers) }
        let params = [], init = {
            method,
            mode: 'cors',
            headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
            // credentials: 'include',// 支持跨域发送cookies
        };
        if (headers) {
            Object.entries(headers).forEach(([k, v]) => {
                init.headers[k] = v
            })
        }
        const ct = init.headers['Content-Type'] || init.headers['content-type'] || init.headers['Content-type']
        if (data) {// 处理消息体
            if (method === 'GET') {
                for (let k in data) params.push(`${encodeURIComponent(k)}=${encodeURIComponent(data[k])} `);
                url += '?' + params.join('&');
            } else {
                if (ct.indexOf('x-www-form-urlencoded') >= 0) {
                    const str = ''
                    Object.keys(data).forEach((k, index) => {
                        str += (index === 0 ? `${k}=${data[k]}` : `&${k}=${data[k]}`)
                    })
                    init.body = str
                } else if (data.constructor === FormData) {
                    init.headers['Content-Type'] = 'multipart/form-data;'
                    init.body = data
                } else if (ct.indexOf('application/json') >= 0) {
                    init.body = JSON.stringify(data)
                } else {
                    init.body = JSON.stringify(data)
                }
            }
        }

        return fetch(url, init).then(e => {
            switch (e.status) {
                case 200: return e.json();
                case 204: break;
                case 401:// 401登录失败统一处理
                    //do something
                    return Promise.reject();
                case 403: return e.json().then(e => Promise.reject(e));// 服务端主动抛出错误
                case 500: return e.json().then(e => Promise.reject(e));
                default: return Promise.reject({ code: 500, msg: '服务器繁忙, 请稍后再试' });
            }
        })
    }
}