'use strict'; /** * @description 利用set进行数组去重 * @param {*} arr 去重数组 */ // 判断是否为空或未定义 function checkNull(str) { if (str === null || str === undefined || str === '') { if (str === 0) { return true; } else { return false; } } else { return true; } } /** * @description 检测是否有默认值 * @param {*} checkObj 键查对象 * @param {*} value 默认值 * @returns {object} 如果没有设置默认值 暂时为0 */ function hasDefaultValue(checkObj, value) { const falg = checkNull(checkObj); if (!falg) { return checkNull(value) ? value : 0; } return checkObj; } /** * @description http请求业务模块的统一处理 */ // ---------------------------------------------------内部方法--------------------------- /** * @description get参数转码,防止编码问题 * @param {string} key 键 * @param {string} value 键值 * @returns {Array} */ function GetParamsEncode(key, value) { return [key, encodeURI(value)]; } /** * @description get请求参数处理 * @param {array || object} params 参数对象 * @returns array */ function GetParamsHandle(params) { let pamarsO = []; try { if (Array.isArray(params)) { params.forEach((ele) => { pamarsO.push(GetParamsEncode(ele[0], ele[1])); }); } else if (params) { Object.keys(params).forEach((key, index) => { pamarsO.push(GetParamsEncode(key, params[key])); }); } else { } return pamarsO; } catch (error) { console.error('get请求url参数处理错误', error); return pamarsO; } } // ------------------------------------------------------方法结束---------------------------- /** * @description 处理get请求参数的拼接 * @param {boolean} url 请求路径 url不为空返回 参数拼接API * @param {object} params 参数 * @return {string || object} */ function handleParamsGet(url, params) { let paramsArr = GetParamsHandle(params); if (url.length > 0) { let paramsArrs = paramsArr.map((ele) => { return `${ele[0]}=${ele[1]}`; }); return `${url}?${paramsArrs.join('&')}`; } else { return ''; } } /** * 处理post请求表单数据参数的拼接 * @param {object} params 参数 */ function handleParamsFromData(params) { let formData = new FormData(); Object.keys(params).forEach((key, index) => { formData.append(key, params[key]); }); return formData; } /** * @description 封裝http請求,实现多线程调用 */ // -------内部方法-------------- /** * @description 处理返回的数据 * @param {string} type 数据类型 * @param {object} response res对象 * @returns {object} */ function handleParamsResData(type, response) { if (type.toUpperCase() == 'TEXT') { // 文本 return response.text(); } else if (type.toUpperCase() == 'JSON') { // json return response.json(); } else if (type.toUpperCase() == 'FROMDATA') { // 表单 return response.formData(); } else if (type.toUpperCase() == 'BLOB') { // blob return response.blob(); } else if (type.toUpperCase() == 'BUFFER') { // 二进制流 return response.arrayBuffer(); } else { return response.text(); } } /** * @descriptionc 处理fetch 参数 * @param {string} url 请求路径 * @param {object} parameter 参数 * @returns {object} */ function handleParamsFetch(url, parameter) { // 处理参数 if (!parameter) { parameter = {}; } parameter.dataType = hasDefaultValue(parameter.dataType, 'json'); let fetOPt = {}; let headers = {}; // 处理请求模式 fetOPt.method = hasDefaultValue(parameter.method, 'GET').toUpperCase(); // 处理请求头 if (!parameter.headers) { headers['Content-Type'] = hasDefaultValue(parameter.headers, 'application/json '); } if (parameter.token) { headers['X-Access-Token'] = `${parameter.token}`; // Token 格式:Bearer + 空格 + Token 值 } fetOPt.headers = headers; // 处理请求参数 后续添加 if (fetOPt.method === 'GET') { url = handleParamsGet(url, parameter.params); } else { // 暂且只处理 表单数据 json数据 if (parameter.params) { // 表单方式 fetOPt.body = handleParamsFromData(parameter.params); } else { // json方式 fetOPt.body = hasDefaultValue(parameter.data ? JSON.stringify(parameter.data) : undefined, {}); } } return { url, parameter, fetOPt, }; } // -----------------------------------------------------内部方法结束-------------------------------------------- /** * fetch 请求参数属性 * method: "GET",//请求的模式 headers: {//请求头 "Content-Type": "text/plain;charset=UTF-8" }, body: undefined,//如何处理缓存 referrer: "about:client",//用于设定fetch()请求的referer标头 referrerPolicy: "no-referrer-when-downgrade",//属性用于设定Referer标头的规则。可能的取值如下 mode: "cors",//请求方式 credentials: "same-origin",//是否发送 Cookie cache: "default",//如何处理缓存 redirect: "follow",//指定 HTTP 跳转的处理方法 integrity: "",//属性指定一个哈希值,用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值 keepalive: false,//用于页面卸载时,告诉浏览器在后台保持连接,继续发送数据 signal: undefined//属性指定一个 AbortSignal 实例,用于取消fetch()请求 */ /** * @deseription fetch请求 * @param {string} url 请求路径 * @param {object} parameter 请求参数 * parameter.dataType //数据类型 text json buffer defvalue= 'json' * parameter.method //请求模式 * parameter.headers //请求头 * parameter.params //表单数据 * parameter.data //结构数据 * ...参数后期补充 * @param {Function} callBack 回调参数 * 当前只处理get post请求 */ let fetchHttp = (url, parameter, callBack) => { let handleObj = handleParamsFetch(url, parameter); url = handleObj.url; let fetOPt = handleObj.fetOPt; // 开始请求 fetch(url, fetOPt).then((response) => { if (response.ok) { // 请求成功 if (callBack instanceof Function) { let datas = handleParamsResData(parameter.dataType, response); datas.then((data) => { // 判定成功,传值 callBack(data); }); } } else { // 请求失败 console.log(response.statusText); } }); };