From 3d3362e4300d49db23de48575d26c8d501fdbfd8 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 20 Aug 2021 18:52:00 +0800
Subject: [PATCH] 优化跨端通讯机制，实现从全局接收App通知，并通知页面
---
bases/Fetcher.js | 394 ++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 297 insertions(+), 97 deletions(-)
diff --git a/bases/Fetcher.js b/bases/Fetcher.js
index ef8d1c2..5d6c443 100644
--- a/bases/Fetcher.js
+++ b/bases/Fetcher.js
@@ -3,10 +3,10 @@
* @author Tevin
*/
-import Axios from 'axios';
+import Taro from '@tarojs/taro';
import Qs from 'qs';
-import {message, Modal} from 'antd';
-import {Tools} from '@components/common/Tools';
+import { Tools } from '@components/common/Tools';
+import project from '@project';
export class Fetcher {
@@ -16,25 +16,53 @@
*/
constructor(options = {}) {
this._data = {
- urlPrefix: options.urlPrefix || ['/api/common', '/api/common'],
+ 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;
+ }
}
/**
* 请求配置
- * @type {{headers: Object, baseURL: string, responseType: string, timeout: number}}
* @private
*/
- _defaultConfig = {
- baseURL: window.location.protocol + '//' + window.location.host,
- headers: {
- 'X-Requested-With': 'XMLHttpRequest',
- 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
- 'Ax-Rq-Type': 'separation',
- },
- responseType: 'json',
- timeout: 10000,
- };
+ _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 地址
@@ -44,34 +72,30 @@
*/
spellURL(devSuffix, serSuffix) {
let url = '';
- // 开发环境地址
- if (Fetcher.inDevMod) {
- url = this._data.urlPrefix[0] + devSuffix;
+ // mock 模式
+ if (this._data.mock === 'on') {
+ url = this._data.urlPrefix[0].replace('api/', '') + devSuffix + '.json';
}
- // 生产环境地址
- else {
+ // 强制实际请求模式
+ 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);
+ }
}
const fixReg = /[a-zA-Z0-9]+\/\.\.\//;
while (url.indexOf('../') >= 0) {
url = url.replace(fixReg, '');
}
url = url.replace(/[./]\//g, '');
- return url;
- }
-
- /**
- * 将 post 参数转换为 get 参数，并拼接 url
- * @param url
- * @param data
- */
- parseParamUrl(url, data) {
- const params = Qs.stringify(data);
- if (url.indexOf('?') >= 0) {
- url += '&' + params;
- } else {
- url += '?' + params;
- }
return url;
}
@@ -84,8 +108,13 @@
* @return {Promise<any>}
*/
get(url, data, remap = [], options = null) {
- const url2 = this.parseParamUrl(url, data);
- return this.query('get', url2, null, remap, options);
+ const params = Qs.stringify(data);
+ if (url.indexOf('?') >= 0) {
+ url += '&' + params;
+ } else {
+ url += '?' + params;
+ }
+ return this.query('get', url, null, remap, options);
}
/**
@@ -97,13 +126,18 @@
* @return {Promise<any>}
*/
post(url, data, remap = [], options = null) {
- // mock 模式
- if (Fetcher.inMockMod) {
- return this.get(url, data, remap, options);
+ if (this._data.mock === 'on') {
+ return this.get(url, data, remap = [], options);
}
- // 正常模式
const params = Qs.stringify(data);
- return this.query('post', url, params, remap, options);
+ const data2 = {};
+ params.split('&').forEach(param => {
+ if (param) {
+ const item = param.split('=');
+ data2[decodeURIComponent(item[0])] = decodeURIComponent(item[1]);
+ }
+ });
+ return this.query('post', url, data2, remap, options);
}
/**
@@ -115,36 +149,61 @@
* @param {object} [options]
* @return {Promise<any>|}
*/
- query(type, url, data = null, remap, options) {
- if (!type || !/^get|post|put$/i.test(type) || !url) {
- return Promise.reject();
- }
- const method = type.toLowerCase();
- const response = Axios[method](url, data, {
- ...this._defaultConfig,
- ...options,
- });
- return response
- .then(response => {
- /**
- * @type {{state: {code, http, msg}, data: Object}}
- * @example response.state.code
- * 2000 通用请求成功
- * 2001 请求成功，但是没有数据，弹窗提示 msg（仅特殊情况使用）
- * 5000 通用请求失败，弹窗提示 msg
- * 9001 登陆已过期，弹窗提示过期且返回登陆页
- * 9002 已登陆但没有操作权限，弹窗提示 msg
- */
- const responseData = this._adaptiveResponseData(response.data);
- responseData.state.http = response.status;
- return this._transformResponseData(responseData, remap);
- })
- // HTTP 异常
- .catch((err) => {
- this._resolveCaughtNetErr(err);
- console.log('query error', err);
- return null;
+ query(type, url, data = null, remap, options = {}) {
+ return new Promise((resolve, reject) => {
+ const header = {
+ ...this._defaultConfig.header,
+ };
+ if (process.env.TARO_ENV === 'weapp') {
+ header['Cookie'] = this._getCookies();
+ }
+ Taro.request({
+ ...this._defaultConfig,
+ header,
+ url: this._defaultConfig.url + url,
+ method: type.toUpperCase(),
+ data,
+ success: response => {
+ if (process.env.TARO_ENV === 'weapp') {
+ this._saveCookies(response.cookies);
+ }
+ /**
+ * @type {{state: {code, http, msg}, data: Object}}
+ * @example response.state.code
+ * 2000 通用请求成功
+ * 2001 请求成功，但是没有数据，弹窗提示 msg（仅特殊情况使用）
+ * 5000 通用请求失败，弹窗提示 msg
+ * 9001 登陆已过期，弹窗提示过期且返回登陆页
+ * 9002 已登陆但没有操作权限，弹窗提示 msg
+ */
+ const responseData = this._adaptiveResponseData(response.data);
+ responseData.state.http = response.statusCode;
+ resolve(this._transformResponseData(responseData, remap));
+ },
+ fail: error => {
+ this._resolveCaughtNetErr(error);
+ reject(null);
+ },
});
+ });
+ }
+
+ _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));
+ }
+
+ _getCookies() {
+ const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}');
+ const cookiesArr = [];
+ Object.keys(localCookies).forEach(key => {
+ cookiesArr.push(key + '=' + localCookies[key]);
+ });
+ return cookiesArr.join('; ');
}
/**
@@ -156,10 +215,53 @@
if (typeof responseData.state === 'object' && typeof responseData.data === 'object') {
return responseData;
}
+ // App版请求，响应体转换
+ if (typeof responseData.ret !== 'undefined' && typeof responseData.data !== '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;
+ }
+ }
+ // 转换响应码
+ 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) {
@@ -184,7 +286,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,
@@ -207,8 +309,8 @@
*/
_resolveCaughtNetErr(err) {
let msg = '';
- if (err.response && err.response.status) {
- switch (err.response.status) {
+ if (err && err.status) {
+ switch (err.status) {
case 400:
msg += '通讯请求有误！(400 Bad Request)';
break;
@@ -243,7 +345,9 @@
} else {
msg += '解析通讯数据异常！';
}
- message.error(msg);
+ setTimeout(() => {
+ this.message('fail', msg);
+ }, 20);
}
/**
@@ -276,12 +380,25 @@
return response.data;
}
} else if (response.state.code === 2001) {
- message.info(response.state.msg);
+ setTimeout(() => {
+ 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.reLaunch({ url: '/pages/home/login/login' });
+ }
+ return null;
} else {
- message.error(response.state.msg);
+ setTimeout(() => {
+ this.message('error', response.state.msg);
+ }, 20);
return null;
}
}
@@ -347,7 +464,7 @@
* @return {String}
* @private
*/
- _stringToCamel(str) {
+ stringToCamel(str) {
let str2 = '';
if (str.indexOf('_') <= 0) {
str2 = str;
@@ -367,7 +484,7 @@
* @return {String}
* @private
*/
- _stringToUnderline(str) {
+ stringToUnderline(str) {
let str2 = '';
if ((/[A-Z]/).test(str)) {
str2 = str.replace(/([A-Z])/g, ($1) => {
@@ -397,9 +514,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);
}
}
// 属性为对象时，递归转换
@@ -435,17 +552,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 || /^\/(upload|static)/.test(path)) {
+ // 完整 URL，地址不变
+ if (/^http/.test(path)) {
return path;
- } else {
- return '/upload/' + path;
}
- } else if (type === 'cut') {
+ // 绝对路径
+ if (/^(\/upload|\/static)/.test(path)) {
+ return Fetcher.host + path;
+ }
+ // 部分路径
+ else {
+ return Fetcher.host + '/upload/' + path;
+ }
+ }
+ // 裁剪多余部分
+ else if (type === 'cut') {
const pathArr = path.split('upload/');
return pathArr[pathArr.length - 1];
}
@@ -484,21 +613,92 @@
}
/**
+ * 显示提示信息
+ * @param type
+ * @param msg
+ */
+ message(type, msg) {
+ Taro.showToast({
+ title: msg,
+ icon: 'none',
+ mask: true,
+ duration: type === 'fail' ? 3000 : 2000,
+ });
+ }
+
+ /**
* 记录是否为本地开发模式
* @type {Boolean}
*/
static inDevMod = (() => {
- // 当处于 mock 请求模式，视为本地开发
- if (Tools.getTopUrlParam('query') === 'mock') {
- return true;
+ // 网页
+ if (process.env.TARO_ENV === 'h5') {
+ // 当没有 url 指定时，只有内网 ip 和 33**/35** 的端口号，视为本地开发模式
+ return /^(192|127|localhost).*?:3[35]\d{2}$/i.test(window.location.host);
}
- // 强制 real 请求，可在本地使用真实请求
- if (Tools.getTopUrlParam('query') === 'real') {
- return false;
+ // 小程序
+ else if (process.env.TARO_ENV === 'weapp') {
+ // 开发编译
+ if (process.env.NODE_ENV === 'development') {
+ return true;
+ }
+ // 生产编译
+ else if (process.env.NODE_ENV === 'production') {
+ return false;
+ }
}
- // 当没有 url 指定时，只有内网 ip 和 35** 的端口号，视为本地开发模式
- return /^(192|127|localhost).*?:35\d{2}$/i.test(window.location.host);
})();
+ /**
+ * 当前服务器主机地址
+ * @type {String}
+ */
+ static host = (() => {
+ // 网页模式
+ if (process.env.TARO_ENV === 'h5') {
+ // 如果网址参数有指定服务器
+ const server = Tools.getUrlParam('server');
+ if (server) {
+ // 如果是完整网址，直接使用地址
+ if (server.indexOf('http') >= 0) {
+ return server;
+ }
+ // 如果有匹配服务器，使用指定的服务器地址
+ 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];
+ }
+ }
+ })();
-}
\ No newline at end of file
+}
--
Gitblit v1.9.1