WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2023-07-31 ad01ea7d8ea42d9df787b6847c2d4272c5740c5b
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,16 +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',
        },
        dataType: '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 地址
@@ -42,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);
        }
@@ -59,53 +80,43 @@
    }
    /**
     * 显示提示信息
     * @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 => {
            const item = param.split('=');
            data2[decodeURIComponent(item[0])] = decodeURIComponent(item[1]);
            if (param) {
                const item = param.split('=');
                data2[decodeURIComponent(item[0])] = decodeURIComponent(item[1]);
            }
        });
        return this.query('post', url, data2, remap, options);
        return this.query('post', url, data2, options);
    }
    /**
@@ -113,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('; ');
    }
    /**
@@ -155,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) {
@@ -183,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,
@@ -202,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) {
@@ -212,7 +335,7 @@
                    msg += '通讯请求有误!(400 Bad Request)';
                    break;
                case 401:
                    msg += '您的登陆已失效!请重新登陆!(401 Unauthorized)';
                    msg += '您的登录已失效!请重新登录!(401 Unauthorized)';
                    break;
                case 403:
                    msg += '通讯请求被拒绝!(403 Forbidden)';
@@ -242,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;
        }
@@ -266,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;
    }
    /**
@@ -346,7 +432,7 @@
     * @return {String}
     * @private
     */
    _stringToCamel(str) {
    stringToCamel(str) {
        let str2 = '';
        if (str.indexOf('_') <= 0) {
            str2 = str;
@@ -366,7 +452,7 @@
     * @return {String}
     * @private
     */
    _stringToUnderline(str) {
    stringToUnderline(str) {
        let str2 = '';
        if ((/[A-Z]/).test(str)) {
            str2 = str.replace(/([A-Z])/g, ($1) => {
@@ -396,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);
                        }
                    }
                    // 属性为对象时,递归转换
@@ -434,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];
            }
@@ -483,21 +581,17 @@
    }
    /**
     * 记录是否为本地开发模式
     * @type {Boolean}
     * 显示提示信息
     * @param type
     * @param msg
     */
    static inDevMod = (() => {
        // 当处于 mock 请求模式,视为本地开发
        if (Tools.getTopUrlParam('query') === 'mock') {
            return true;
        }
        // 强制 real 请求,可在本地使用真实请求
        if (Tools.getTopUrlParam('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,
        });
    }
}
}