WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2021-01-25 8f540e3257e903deeb9fdba22d45c938057cb914
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,24 +16,36 @@
     */
    constructor(options = {}) {
        this._data = {
            urlPrefix: options.urlPrefix || ['/api/common', '/api/common'],
            urlPrefix: options.urlPrefix || ['/api/common/', '/api/common/'],
        };
        // 网页
        if (process.env.TARO_ENV === 'h5') {
            this._defaultConfig.url = window.location.protocol + '//' + window.location.host;
        }
        // 小程序
        else if (process.env.TARO_ENV === 'weapp') {
            if (Fetcher.inDevMod) {
                this._defaultConfig.url = project.localHost;
            } else {
                this._defaultConfig.url = project.serverHost;
            }
        }
    }
    /**
     * 请求配置
     * @type {{headers: Object, baseURL: string, responseType: string, timeout: number}}
     * @private
     */
    _defaultConfig = {
        baseURL: window.location.protocol + '//' + window.location.host,
        headers: {
        url: '',
        header: {
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
            'Ax-Rq-Type': 'separation',
        },
        responseType: 'json',
        timeout: 10000,
        credentials: 'same-origin',
        dataType: 'json',
        timeout: 30 * 1000,
    };
    /**
@@ -61,21 +73,6 @@
    }
    /**
     * 将 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;
    }
    /**
     * get 请求
     * @param {String} url
     * @param {*} data
@@ -84,8 +81,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 +99,15 @@
     * @return {Promise<any>}
     */
    post(url, data, remap = [], options = null) {
        // mock 模式
        if (Fetcher.inMockMod) {
            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 +119,33 @@
     * @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) => {
            Taro.request({
                ...this._defaultConfig,
                url: this._defaultConfig.url + url,
                method: type.toUpperCase(),
                data,
                success: 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.statusCode;
                    resolve(this._transformResponseData(responseData, remap));
                },
                fail: error => {
                    this._resolveCaughtNetErr(error);
                    reject(null);
                },
            });
        });
    }
    /**
@@ -159,7 +160,7 @@
        // 旧请求,操作类通讯,响应体转换
        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 +185,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 +208,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 +244,7 @@
        } else {
            msg += '解析通讯数据异常!';
        }
        message.error(msg);
        this.message('error', msg);
    }
    /**
@@ -276,12 +277,12 @@
                return response.data;
            }
        } else if (response.state.code === 2001) {
            message.info(response.state.msg);
            this.message('info', response.state.msg);
            return null;
        } else if (response.state.code === 9001) {
            this._showLoginExpired();
            // this._showLoginExpired();
        } else {
            message.error(response.state.msg);
            this.message('error', response.state.msg);
            return null;
        }
    }
@@ -440,7 +441,7 @@
        } else {
            // 修复补齐
            if (type === 'fix') {
                if (!path || /^\/(upload|static)/.test(path)) {
                if (!path || /^(http|\/upload|\/static)/.test(path)) {
                    return path;
                } else {
                    return '/upload/' + path;
@@ -484,21 +485,80 @@
    }
    /**
     * 显示提示信息
     * @param type
     * @param msg
     */
    message(type, msg) {
        Taro.showToast({
            title: msg,
            icon: 'none',
            mask: true,
            duration: type === 'error' ? 5000 : 3000,
        });
    }
    /**
     * 转换图片路径(旧版运营平台)
     * @param {String} type - fix or cut
     * @param {String} path
     * @example
     *      fix -> '/upload/4/5e6c91eeccedc.jpg'
     *      cut -> '4/5e56307c489c7.jpg'
     */
    transImgPath(type, path) {
        if (!path) {
            return '';
        }
        if (path.indexOf(',') >= 0) {
            return path.split(',').map(p => this.transImgPath(type, p)).join(',');
        } else {
            // 修复补齐
            if (type === 'fix') {
                if (!path || /^(http|\/upload|\/static)/.test(path)) {
                    return path;
                } else {
                    return '/upload/' + path;
                }
            } else if (type === 'cut') {
                const pathArr = path.split('upload/');
                return pathArr[pathArr.length - 1];
            }
        }
    }
    /**
     * 记录是否为本地开发模式
     * @type {Boolean}
     */
    static inDevMod = (() => {
        // 当处于 mock 请求模式,视为本地开发
        if (Tools.getTopUrlParam('query') === 'mock') {
            return true;
        // 网页
        if (process.env.TARO_ENV === 'h5') {
            const reg = new RegExp('(^|&)query=([^&]*)(&|$)', 'i');
            const match = window.location.search.substr(1).match(reg);
            const param = match !== null ? decodeURIComponent(match[2]) : null;
            // 当处于 mock 请求模式,视为本地开发
            if (param === 'mock') {
                return true;
            }
            // 强制 real 请求,可在本地使用真实请求
            if (param === 'real') {
                return false;
            }
            // 当没有 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);
    })();
}