From a250b6216753cfd0c0622a1fbc0f3254fc8e0a4f Mon Sep 17 00:00:00 2001 From: Tevin <tingquanren@163.com> Date: Tue, 19 Mar 2024 18:39:44 +0800 Subject: [PATCH] 图片预览组件,支持图片显示 --- bases/Fetcher.js | 201 ++++++++++++++++++------------------------------- 1 files changed, 74 insertions(+), 127 deletions(-) diff --git a/bases/Fetcher.js b/bases/Fetcher.js index b0abf5f..5ee0a08 100644 --- a/bases/Fetcher.js +++ b/bases/Fetcher.js @@ -6,6 +6,7 @@ import Taro from '@tarojs/taro'; import Qs from 'qs'; import { Tools } from '@components/common/Tools'; +import { $hostBoot } from '@components/bases/HostBoot'; import project from '@project'; export class Fetcher { @@ -17,17 +18,7 @@ constructor(options = {}) { this._data = { urlPrefix: options.urlPrefix || ['/api/common/', '/api/common/'], - mock: Tools.getUrlParam('mock') || project.host.mock, }; - if (this._data.mock === 'on') { - if (project.host.assetsPath.indexOf('..') === 0) { - this._defaultConfig.url = Fetcher.host + '/' + project.host.assetsPath.replace('/assets', '/mocks'); - } else { - this._defaultConfig.url = Fetcher.host + project.host.assetsPath.replace('/assets', '/mocks'); - } - } else { - this._defaultConfig.url = Fetcher.host; - } } /** @@ -72,24 +63,13 @@ */ spellURL(devSuffix, serSuffix) { let url = ''; - // mock 模式 - if (this._data.mock === 'on') { + // mock地址 + if ($hostBoot.isOnMock()) { url = this._data.urlPrefix[0].replace('api/', '') + devSuffix + '.json'; } - // 强制实际请求模式 - else if (this._data.mock === 'real') { - url = this._data.urlPrefix[1] + (serSuffix || devSuffix); - } - // 正常模式 + // 正常地址 else { - // 开发环境地址 - if (Fetcher.inDevMod) { - url = this._data.urlPrefix[0] + devSuffix; - } - // 生产环境地址 - else { - url = this._data.urlPrefix[1] + (serSuffix || devSuffix); - } + url = this._data.urlPrefix[1] + (serSuffix || devSuffix); } const fixReg = /[a-zA-Z0-9]+\/\.\.\//; while (url.indexOf('../') >= 0) { @@ -124,7 +104,8 @@ * @return {Promise<any>} */ post(url, data, options = {}) { - if (this._data.mock === 'on') { + // mock 模式转换为 get 请求 + if ($hostBoot.isOnMock()) { return this.get(url, data, options); } const params = Qs.stringify(data); @@ -144,49 +125,82 @@ * @param {String} url * @param {*} [data] * @param {object} [options] - * @return {Promise<any>|} + * @return {Promise<any>} */ 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, header, - url: this._defaultConfig.url + url, + 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, options)); }, fail: error => { - if (typeof options.silence === 'undefined' || !options.silence) { - 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 => { @@ -196,6 +210,7 @@ Taro.setStorageSync('cookies', JSON.stringify(localCookies)); } + // 小程序中,获取 cookies _getCookies() { const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}'); const cookiesArr = []; @@ -214,8 +229,8 @@ if (typeof responseData.state === 'object' && typeof responseData.data === 'object') { return responseData; } - // App版请求,响应体转换 - if (typeof responseData.ret !== 'undefined' && typeof responseData.data !== 'undefined') { + // App版请求(存在ret直接视为App请求),响应体转换 + if (typeof responseData.ret !== 'undefined') { // 转换数据体 let data2 = { rows: [] }; // 数组类型 @@ -229,6 +244,10 @@ if (!Tools.isEmptyObject(responseData.data)) { data2 = responseData.data; } + } + // 不存在 + else if (typeof responseData.data === 'undefined') { + data2 = {}; } // 转换响应码 let code = 0; @@ -304,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) { @@ -314,7 +335,7 @@ msg += '通讯请求有误!(400 Bad Request)'; break; case 401: - msg += '您的登陆已失效!请重新登陆!(401 Unauthorized)'; + msg += '您的登录已失效!请重新登录!(401 Unauthorized)'; break; case 403: msg += '通讯请求被拒绝!(403 Forbidden)'; @@ -344,14 +365,18 @@ } else { msg += '解析通讯数据异常!'; } + callback(msg); setTimeout(() => { - this.message('fail', msg); + if (typeof options.silence === 'undefined' || !options.silence) { + this._message('fail', msg); + } }, 20); } /** * 转换响应体 * @param response + * @param options * @returns {Object|{}|null} * @private */ @@ -376,26 +401,25 @@ } else if (response.state.code === 2001) { setTimeout(() => { if (typeof options.silence === 'undefined' || !options.silence) { - this.message('info', response.state.msg); + this._message('info', response.state.msg); } }, 20); return null; } else if (response.state.code === 9001) { - // 在微信公众号中,每次进入即登陆,登陆失效关闭重进即可(进入链接带公司绑定码,页面没有存这个码,也不需要) - // 在小程序中,使用自动登陆机制,自动登陆失败才去授权页绑定账号 + // 在微信公众号中,每次进入即登录,登录失效关闭重进即可(进入链接带公司绑定码,页面没有存这个码,也不需要) + // 在小程序中,使用自动登录机制,自动登录失败才去授权页绑定账号 if (process.env.TARO_ENV === 'weapp') { Taro.navigateTo({ url: '/pages/home/index/index?mode=login' }); } - // 在App中,直接跳转登陆页 + // 在App中,跳转到首页取消登录 if (project.appHybrid) { - Taro.removeStorageSync('AiSim@UserInfo'); - Taro.navigateBack({ delta: Taro.getCurrentPages().length }); + Taro.navigateTo({ url: '/pages/home/index/index?mode=logout' }); } return null; } else { setTimeout(() => { if (typeof options.silence === 'undefined' || !options.silence) { - this.message('error', response.state.msg); + this._message('error', response.state.msg); } }, 20); return null; @@ -509,12 +533,12 @@ return path; } // 绝对路径 - if (/^(\/upload|\/static)/.test(path)) { - return Fetcher.host + path; + if (/^(\/upload|\/static|\/mini|\/assets)/.test(path)) { + return $hostBoot.getHost() + path; } // 部分路径 else { - return Fetcher.host + '/upload/' + path; + return $hostBoot.getHost() + '/upload/' + path; } } // 裁剪多余部分 @@ -561,90 +585,13 @@ * @param type * @param msg */ - message(type, msg) { + _message(type, msg) { Taro.showToast({ title: msg, icon: 'none', - mask: true, + mask: false, duration: type === 'fail' ? 3000 : 2000, }); } - - /** - * 记录是否为本地开发模式 - * @type {Boolean} - */ - static inDevMod = (() => { - // 网页 - if (process.env.TARO_ENV === 'h5') { - // 当没有 url 指定时,只有内网 ip 和 33**/35** 的端口号,视为本地开发模式 - return /^(192|127|localhost).*?:3[35]\d{2}$/i.test(window.location.host); - } - // 小程序 - else if (process.env.TARO_ENV === 'weapp') { - // 开发编译 - if (process.env.NODE_ENV === 'development') { - return true; - } - // 生产编译 - else if (process.env.NODE_ENV === 'production') { - return false; - } - } - })(); - - /** - * 当前服务器主机地址 - * @type {String} - */ - static host = (() => { - // 网页模式 - if (process.env.TARO_ENV === 'h5') { - // 如果网址参数有指定服务器 - const server = Tools.getUrlParam('server'); - if (server) { - // 如果是完整网址,使用网址对应的域名 - if (server.indexOf('http') >= 0) { - const portal = server.split('//')[0]; - const domain = server.split('//')[1].split('/')[0]; - return portal + '//' + domain; - } - // 如果有匹配服务器,使用指定的服务器地址 - if (typeof project.host.hosts[server] !== 'undefined') { - return project.host.hosts[server]; - } - // 否则使用本地 - else { - return project.host.hosts.lc; - } - } - // 网页域名提取服务器地址 - else if (window.location.protocol.indexOf('http') >= 0) { - return window.location.protocol + '//' + window.location.host; - } - // 既不指定server也不是域名访问,使用设置的服务器地址 - else { - // 开发 - if (Fetcher.inDevMod) { - return project.host.hosts[project.host.devType]; - } - // 生产 - else { - return project.host.hosts[project.host.serverType]; - } - } - } - // 小程序模式 - else if (process.env.TARO_ENV === 'weapp') { - // 开发 - if (Fetcher.inDevMod) { - return project.host.hosts[project.host.devType]; - } - // 生产 - else { - return project.host.hosts[project.host.serverType]; - } - } - })(); } -- Gitblit v1.9.1