From 6bbc2f3bf34debf6e3547c4000ba6fe9abe43b7d Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Fri, 22 Jul 2022 18:51:55 +0800 Subject: [PATCH] 微调请求捕获细节 --- bases/Fetcher.js | 365 ++++++++++++++++++++++++++++++++------------------- 1 files changed, 228 insertions(+), 137 deletions(-) diff --git a/bases/Fetcher.js b/bases/Fetcher.js index f0124fe..5a3c494 100644 --- a/bases/Fetcher.js +++ b/bases/Fetcher.js @@ -5,7 +5,9 @@ import Taro from '@tarojs/taro'; import Qs from 'qs'; -import {Tools} from '@components/common/Tools'; +import { Tools } from '@components/common/Tools'; +import { $hostBoot } from '@components/bases/HostBoot'; +import project from '@project'; export class Fetcher { @@ -23,17 +25,35 @@ * 请求配置 * @private */ - _defaultConfig = { - url: window.location.protocol + '//' + window.location.host, - header: { - 'X-Requested-With': 'XMLHttpRequest', - 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', - 'Ax-Rq-Type': 'separation', - }, - credentials: 'same-origin', - dataType: 'json', - timeout: 30 * 1000, - }; + _defaultConfig = (() => { + // 跨域模式,一般为 App 内嵌页面 + if (project.appHybrid) { + return { + url: '', + header: { + 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', + }, + mode: 'cors', + credentials: 'include', + dataType: 'json', + timeout: 30 * 1000, + }; + } + // 正常模式,小程序、普通H5 + else { + return { + url: '', + header: { + 'X-Requested-With': 'XMLHttpRequest', + 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', + 'Ax-Rq-Type': 'separation', + }, + credentials: 'same-origin', + dataType: 'json', + timeout: 30 * 1000, + }; + } + })(); /** * 拼写 URL 地址 @@ -43,11 +63,11 @@ */ spellURL(devSuffix, serSuffix) { let url = ''; - // 开发环境地址 - if (Fetcher.inDevMod) { - url = this._data.urlPrefix[0] + devSuffix; + // mock地址 + if ($hostBoot.isOnMock()) { + url = this._data.urlPrefix[0].replace('api/', '') + devSuffix + '.json'; } - // 生产环境地址 + // 正常地址 else { url = this._data.urlPrefix[1] + (serSuffix || devSuffix); } @@ -60,46 +80,34 @@ } /** - * 显示提示信息 - * @param type - * @param msg - */ - message(type, msg) { - Taro.showToast({ - title: msg, - icon: 'none', - mask: true, - duration: type === 'error' ? 5000 : 3000, - }); - } - - /** * get 请求 * @param {String} url * @param {*} data - * @param {(String[])[]} [remap] * @param {object} [options] * @return {Promise<any>} */ - get(url, data, remap = [], options = null) { + get(url, data, options = {}) { const params = Qs.stringify(data); if (url.indexOf('?') >= 0) { url += '&' + params; } else { url += '?' + params; } - return this.query('get', url, null, remap, options); + return this.query('get', url, null, options); } /** * post 请求 * @param {String} url * @param {*} data - * @param {(String[])[]} [remap] * @param {object} [options] * @return {Promise<any>} */ - post(url, data, remap = [], options = null) { + post(url, data, options = {}) { + // mock 模式转换为 get 请求 + if ($hostBoot.isOnMock()) { + return this.get(url, data, options); + } const params = Qs.stringify(data); const data2 = {}; params.split('&').forEach(param => { @@ -108,7 +116,7 @@ data2[decodeURIComponent(item[0])] = decodeURIComponent(item[1]); } }); - return this.query('post', url, data2, remap, options); + return this.query('post', url, data2, options); } /** @@ -116,37 +124,100 @@ * @param {String} type * @param {String} url * @param {*} [data] - * @param {*} [remap] * @param {object} [options] * @return {Promise<any>|} */ - query(type, url, data = null, remap, options = {}) { + query(type, url, data = null, options = {}) { return new Promise((resolve, reject) => { + const header = { + ...this._defaultConfig.header, + }; + // 小程序中追加 cookie + if (process.env.TARO_ENV === 'weapp') { + header['Cookie'] = this._getCookies(); + } Taro.request({ ...this._defaultConfig, - url: this._defaultConfig.url + url, + header, + url: this._createUrlPrefix(options) + url, method: type.toUpperCase(), data, success: response => { + // 小程序中保存 cookie + if (process.env.TARO_ENV === 'weapp') { + this._saveCookies(response.cookies); + } + // 捕获响应 + options && options.onCapture && options.onCapture({ + url: this._createUrlPrefix(options) + url, + request: data, + response: { ...response.data }, + httpCode: response.statusCode, + }); /** * @type {{state: {code, http, msg}, data: Object}} * @example response.state.code * 2000 通用请求成功 * 2001 请求成功,但是没有数据,弹窗提示 msg(仅特殊情况使用) * 5000 通用请求失败,弹窗提示 msg - * 9001 登陆已过期,弹窗提示过期且返回登陆页 - * 9002 已登陆但没有操作权限,弹窗提示 msg + * 9001 登录已过期,弹窗提示过期且返回登录页 + * 9002 已登录但没有操作权限,弹窗提示 msg */ const responseData = this._adaptiveResponseData(response.data); responseData.state.http = response.statusCode; - resolve(this._transformResponseData(responseData, remap)); + resolve(this._transformResponseData(responseData, options)); }, fail: error => { - this._resolveCaughtNetErr(error); + // 处理响应 + this._resolveCaughtNetErr(error, options, msg => { + // 捕获响应 + options && options.onCapture && options.onCapture({ + url: this._createUrlPrefix(options) + url, + request: data, + httpCode: error && error.status, + httpMsg: msg + (error.message ? (' / ' + error.message) : ''), + }); + }); reject(null); }, }); }); + } + + _createUrlPrefix(options) { + // 如果指定了主机类,使用固定主机类型地址,否则使用默认主机类型地址 + let urlPrefix = ''; + if (options.hostType) { + urlPrefix = $hostBoot.getHost(options.hostType); + } else { + urlPrefix = $hostBoot.getHost(); + } + // mock 模式转换地址 + if ($hostBoot.isOnMock()) { + urlPrefix += (project.host.assetsPath.indexOf('..') === 0 ? '/' : '') + + project.host.assetsPath.replace('/assets', '/mocks'); + } + return urlPrefix; + } + + // 小程序中,保存 cookies + _saveCookies(cookies) { + const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}'); + cookies.forEach(cookie => { + const mc = cookie.match(/([a-zA-Z0-9_\-]+)=(.*?);/); + localCookies[mc[1]] = mc[2]; + }); + Taro.setStorageSync('cookies', JSON.stringify(localCookies)); + } + + // 小程序中,获取 cookies + _getCookies() { + const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}'); + const cookiesArr = []; + Object.keys(localCookies).forEach(key => { + cookiesArr.push(key + '=' + localCookies[key]); + }); + return cookiesArr.join('; '); } /** @@ -158,10 +229,57 @@ if (typeof responseData.state === 'object' && typeof responseData.data === 'object') { return responseData; } + // App版请求(存在ret直接视为App请求),响应体转换 + if (typeof responseData.ret !== 'undefined') { + // 转换数据体 + let data2 = { rows: [] }; + // 数组类型 + if (responseData.data instanceof Array) { + if (responseData.data.length > 0) { + data2.rows = responseData.data; + } + } + // 对象类型 + else if (responseData.data instanceof Object) { + if (!Tools.isEmptyObject(responseData.data)) { + data2 = responseData.data; + } + } + // 不存在 + else if (typeof responseData.data === 'undefined') { + data2 = {}; + } + // 转换响应码 + let code = 0; + // 正常 + if (responseData.ret === 0) { + code = 2000; + } + // 特殊模式下的状态码,转换为正常模式,由页面处理业务 + else if (responseData.ret === 10999) { + code = 2000; + } + // 未登录 + else if (responseData.ret === 101110) { + code = 9001; + } + // 其他按报错 + else { + code = 5000; + } + // 合并响应体 + return { + state: { + code, + msg: responseData.msg, + }, + data: data2, + }; + } // 旧请求,操作类通讯,响应体转换 if (typeof responseData.status !== 'undefined' && typeof responseData.dataMsg !== 'undefined') { // 转换数据体 - let data2 = {rows: []}; + let data2 = { rows: [] }; // 数组类型 if (responseData.dataMsg instanceof Array) { if (responseData.dataMsg.length > 0) { @@ -186,7 +304,7 @@ // 旧版请求,数据列表类通讯,响应体转换 if (typeof responseData.data !== 'undefined' && typeof responseData.count !== 'undefined') { const data = (!!responseData.data && typeof responseData.data !== 'object') ? - {data: responseData.data} : null; + { data: responseData.data } : null; return { state: { code: responseData.code === 0 ? 2000 : 5000, @@ -205,9 +323,11 @@ /** * 解析捕获的网络错误 * @param err + * @param options + * @param callback * @private */ - _resolveCaughtNetErr(err) { + _resolveCaughtNetErr(err, options, callback) { let msg = ''; if (err && err.status) { switch (err.status) { @@ -215,7 +335,7 @@ msg += '通讯请求有误!(400 Bad Request)'; break; case 401: - msg += '您的登陆已失效!请重新登陆!(401 Unauthorized)'; + msg += '您的登录已失效!请重新登录!(401 Unauthorized)'; break; case 403: msg += '通讯请求被拒绝!(403 Forbidden)'; @@ -245,17 +365,22 @@ } else { msg += '解析通讯数据异常!'; } - this.message('error', msg); + callback(msg); + setTimeout(() => { + if (typeof options.silence === 'undefined' || !options.silence) { + this._message('fail', msg); + } + }, 20); } /** * 转换响应体 * @param response - * @param {Array[]} remap + * @param options * @returns {Object|{}|null} * @private */ - _transformResponseData(response, remap) { + _transformResponseData(response, options) { if (!response) { return null; } @@ -269,78 +394,36 @@ } // 先转驼峰 response.data = this.transKeyName('camel', response.data); - // 再重映射 - if (remap && remap.length > 0) { - response.data = this._remapData(response.data, remap); - } // 转换常规数字字符串为数值 response.data = this._transNumStringToNumber(response.data); return response.data; } } else if (response.state.code === 2001) { - this.message('info', response.state.msg); + setTimeout(() => { + if (typeof options.silence === 'undefined' || !options.silence) { + this._message('info', response.state.msg); + } + }, 20); return null; } else if (response.state.code === 9001) { - // this._showLoginExpired(); + // 在微信公众号中,每次进入即登录,登录失效关闭重进即可(进入链接带公司绑定码,页面没有存这个码,也不需要) + // 在小程序中,使用自动登录机制,自动登录失败才去授权页绑定账号 + if (process.env.TARO_ENV === 'weapp') { + Taro.navigateTo({ url: '/pages/home/index/index?mode=login' }); + } + // 在App中,跳转到首页取消登录 + if (project.appHybrid) { + Taro.navigateTo({ url: '/pages/home/index/index?mode=logout' }); + } + return null; } else { - this.message('error', response.state.msg); + setTimeout(() => { + if (typeof options.silence === 'undefined' || !options.silence) { + this._message('error', response.state.msg); + } + }, 20); return null; } - } - - /** - * 转换响应体数据结构 - * @param {Object} data - * @param {Array[]} maps - * @example maps: [ - * ['rows.[]', 'recvName', 'userName'] // 默认语法:键名转换(路径,旧名,新名) - * ] - * @private - */ - _remapData(data, maps) { - // 渡值 - const ferryValue = (source, paths, map) => { - // 最后一环,传值 - if (paths.length === 0) { - // 目标已有值,跳过传值不覆盖 - if (typeof source[map[2]] !== 'undefined') { - return; - } - // 来源没有值,赋值空字符串 - if (typeof source[map[1]] === 'undefined') { - source[map[2]] = ''; - } - // 来源有值,直接赋值 - else { - source[map[2]] = source[map[1]]; - } - delete source[map[1]]; - return; - } - // 提取当前环节 - const curPath = paths.shift(); - if (curPath === '[]') { - source.forEach(item => { - ferryValue(item, [...paths], map); - }); - } else { - ferryValue(source[curPath], [...paths], map); - } - }; - for (let map of maps) { - // 键名转换 - if (map[0].indexOf('.') >= 0) { - const paths = map[0].split('.'); - ferryValue(data, paths, map); - } else { - if (map[0].length > 0) { - ferryValue(data, [map[0]], map); - } else { - ferryValue(data, [], map); - } - } - } - return data; } /** @@ -349,7 +432,7 @@ * @return {String} * @private */ - _stringToCamel(str) { + stringToCamel(str) { let str2 = ''; if (str.indexOf('_') <= 0) { str2 = str; @@ -369,7 +452,7 @@ * @return {String} * @private */ - _stringToUnderline(str) { + stringToUnderline(str) { let str2 = ''; if ((/[A-Z]/).test(str)) { str2 = str.replace(/([A-Z])/g, ($1) => { @@ -399,9 +482,9 @@ // 字符串键名进行转换 else { if (type === 'camel') { - key = this._stringToCamel(p); + key = this.stringToCamel(p); } else if (type === 'underline') { - key = this._stringToUnderline(p); + key = this.stringToUnderline(p); } } // 属性为对象时,递归转换 @@ -437,17 +520,29 @@ if (!path) { return ''; } + // 多项时,先拆分转换,再合并 if (path.indexOf(',') >= 0) { return path.split(',').map(p => this.transImgPath(type, p)).join(','); - } else { + } + // 单项时转换 + else { // 修复补齐 if (type === 'fix') { - if (!path || /^(http|\/upload|\/static)/.test(path)) { + // 完整 URL,地址不变 + if (/^http/.test(path)) { return path; - } else { - return '/upload/' + path; } - } else if (type === 'cut') { + // 绝对路径 + if (/^(\/upload|\/static|\/mini|\/assets)/.test(path)) { + return $hostBoot.getHost() + path; + } + // 部分路径 + else { + return $hostBoot.getHost() + '/upload/' + path; + } + } + // 裁剪多余部分 + else if (type === 'cut') { const pathArr = path.split('upload/'); return pathArr[pathArr.length - 1]; } @@ -486,21 +581,17 @@ } /** - * 记录是否为本地开发模式 - * @type {Boolean} + * 显示提示信息 + * @param type + * @param msg */ - static inDevMod = (() => { - // 当处于 mock 请求模式,视为本地开发 - if (Tools.getUrlParam('query') === 'mock') { - return true; - } - // 强制 real 请求,可在本地使用真实请求 - if (Tools.getUrlParam('query') === 'real') { - return false; - } - // 当没有 url 指定时,只有内网 ip 和 33** 的端口号,视为本地开发模式 - return /^(192|127|localhost).*?:33\d{2}$/i.test(window.location.host); - })(); + _message(type, msg) { + Taro.showToast({ + title: msg, + icon: 'none', + mask: false, + duration: type === 'fail' ? 3000 : 2000, + }); + } - -} \ No newline at end of file +} -- Gitblit v1.9.1