React开发中路径参数截取、时间戳转换、文件导出整理

Get参数拼接

在react中调用接口时，一般在action中传递的参数形式为对象类型：

    let param = {
        param1: value1,
        param2: value2,
        ...
    }
    ...
    dispatch(actions.httpRequest(param))

在saga或redux-thunk中，post请求方式一般会在body中传递：

    body: JSON.stringify(param),

get请求一般以?param1=value1&param2=value2的方式拼接在路径中，但是如果参数比较多，就会很麻烦，所以封装一个拼接参数的方法如下：

    /**
     * 得到get请求后面的参数部分，不忽略空
     * @param param
     * @returns {String}
     */
    getUrlParam: (param: any) => {
        let isFirst= true, urlParam: String = "";
        for (let item in param) {
            if (isFirst) {
                isFirst= false;
                urlParam= "?" + item + "=" + param[item];
            } else {
                urlParam= urlParam+ "&" + item + "=" + param[item];
            }
        }
        return urlParam;
    },
    /**
     * 得到get请求后面的参数部分,去掉参数值为空的项
     * @param param
     * @returns {String}
     */
    getUrlParamNotEmpty: (param: any) => {
        let isFirst = true, urlParam: String = "";
        for (let item in param) {
            if (isFirst) {
                isFirst = false;
                if(param[item]){
                    urlParam= "?" + item + "=" + param[item];
                }else {
                    urlParam= "?";
                }
            } else {
                if(param[item]){
                    urlParam= urlParam+ "&" + item + "=" + param[item];
                }else {
                    urlParam= urlParam;
                }
            }
        }
        return urlParam;
    },

在路径中的使用：

  url: 'https://www.xxxx.com/api/getValue' + getUrlParamNotEmpty(param)

获取路径上的参数

function getUrlParam() {
  const url = location.search;
  const theParam = {};
  if (url.indexOf('?') !== -1) {
    const str = url.substr(1);
    const strs = str.split('&');
    for (let i = 0; i < strs.length; i++) {
      theParam[strs[i].split('=')[0]] = decodeURIComponent(unescape(strs[i].split('=')[1]));
    }
  }
  return theParam;
}

获取路径上指定参数

function getUrlParamReg(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 含有目标参数的正则表达式
    const r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r) {
        return decodeURIComponent(r[2]);
    }
    return null; //返回参数值
}

时间操作相关

时间戳转换成字符串通用方法(使用正则表达式)

 /**
 * 使用正则表达式将时间戳转换成指定的字符串形式输出
 * 使用方法： fmtStamp2Str(1531969254, 'yyyy-MM-dd hh:mm:ss')
 * 传入的为秒级时间戳
 * @param dateStr
 * @param fmt
 * @returns {any}
 */
function fmtStamp2Str(dateStr: any, fmt: any) {
    let date = new Date();
    date.setTime(dateStr*1000);
    if (/(y+)/.test(fmt)) { // 匹配yyyy 替换成年份字符串
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substring(4 - RegExp.$1.length));
    }
    let obj: any = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (let k in obj) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = obj[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
        }
    }
    return fmt;
}

查询条件时间范围为开始时间00:00:00，截止时间为23:59:59，前后端交互为秒级时间戳，转换如下：

    //开始时间定为选择当天的0点
    fmtStartDate = (dateStr: any) => {
        let dateNum = new Date(new Date(new Date(dateStr).toLocaleDateString()).getTime());
        // let dateNum = new Date(new Date(new Date(dateStr).getTime() - 24 * 60 * 60 * 1000).setHours(0,0,0,0));  (兼容模式)
        return parseInt((dateNum.getTime()/1000).toString());
    };

    //结束时间为选择当天的23:59:59
    fmtEndDate = (dateStr: any) =>{
        //取当天的23:59:59
        let dateNum = new Date(new Date(new Date(dateStr).toLocaleDateString()).getTime()+24*60*60*1000-1);
        // let dateNum = new Date(new Date(new Date(dateStr).getTime() - 24 * 60 * 60 * 1000).setHours(23,59,59,999));  (兼容模式)
        return parseInt((dateNum.getTime()/1000).toString());
    };

具体使用传入时间字符串即可：

    fmtStartDate('2018-12-12')

取当前时间的前n天：

    new Date(new Date().getTime() - (n * 24 * 60 * 60 * 1000)).toLocaleDateString();

前端文件导出，文件导出一般为blob方式，接口响应成功后：

    response.blob().then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        let filename = "output.xlsx";
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    });