JS花里胡哨的日志打印

JS花里胡哨的日志打印

分享一个自己在无聊的时候写的axios请求错误日志打印美化，有什么新奇的想法欢迎各位大佬们评论区补充。

效果图

默认颜色效果

随机颜色效果

使用方式

import { reqErrLog  } from '*.js'
import axios from 'axios'const ins = axios.create({baseUrl: process.env.VUE_APP_BASE_URL,timeout: 10 * 1000
})ins.interceptors.response.use(response => {const { data, config } = response;// 处理异常返回码if (data.code === 500) {reqErrLog(config, data);return Promise.reject(data)}return data
})

代码实现

/*** 花里胡哨请求日志打印* @param {Object} config 请求设置* @param {Object} repData 请求返回结果* @param {Array} ext 拓展打印信息* @param {Array} skin 皮肤数组* @param {Boolean} showDefSkin 是否显示默认配色*/
export const reqErrLog = (config, repData, ext = [], skin = [], showDefSkin = true) => {const baseURL = process.env.VUE_APP_BASE_URL// 皮肤样式rbg色值const defaultSkin = [[9, 176, 233],[171, 146, 212],[169, 193, 238],[51, 60, 130],[252, 169, 127],[140, 219, 229],[99, 190, 205],[244, 98, 134]]const logSkin = skin.length ? skin : defaultSkin// 日志样式const logStyle = (color, size) => {return [`color: rgb(${color.join(',')})`,`font-size: ${size}px`,`text-shadow: 1px 1px 3px rgba(${color.join(',')}, .6)`].join(';')}// 随机生成rgb颜色const generateColor = () => {return new Array(3).fill(0).map(() => Math.ceil(Math.random() * 255))}// 打印信息let infoGroup = [{label: '请求接口',size: 12,content: baseURL + config.url}, {label: '请求方法',size: 12,content: config.method.toUpperCase(),}, {label: '请求参数',size: 12,content: JSON.stringify(config.params)}, {label: '请求数据',size: 12,content: JSON.stringify(config.data)}, {label: '请求头部',size: 12,content: JSON.stringify(config.headers)}, {label: '错误代码',size: 12,content: repData?.error_code}, {label: '错误信息',size: 12,content: repData?.msg}, {label: '请求时间',size: 12,content: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`}, ...ext]infoGroup = infoGroup.map((item, index) => {item.color = showDefSkin? logSkin[index + 1 > logSkin.length? (index + 1) % logSkin.length: index]: generateColor()return item})console.group(config.url + '请求错误')for (const key in infoGroup) {const { label, color, size, content } = infoGroup[key]console.info(`%c${label}: %s`, logStyle(color, size), content)}console.groupEnd()
}