最终效果如下

代码如下

const baseURL = 'http://wxlc.wezoz.com/' // your base url
async function request(api, method, header, params) {
    console.group(api)
    console.log('%c' + method + ' REQUEST:', "color:green")
    console.log({
        'api': api,
        'header': header,
        'params': params
    })
    return await new Promise((resolve, reject) => {
        uni.request({
            url: baseURL + api,
            method: method,
            header: header,
            data: params,
            success: (result) => {
                console.log('%c' + method + ' SUCCESS RETURN DATA:', "color:green")
                console.log(result)
                console.groupEnd(api)
                resolve(result.data);
            },
            fail: (e) => {
                reject(e);
            }
        })
    })
}
async function post(api, params, success) {
    const POST_METHOD = 'POST'
    const POST_HEADER = {
        'content-type': 'application/x-www-form-urlencoded',
        'token': wx.getStorageSync('token')
    }
    return await request(api, POST_METHOD, POST_HEADER, params)
}
async function get(api, params, success) {
    const GET_METHOD = 'GET'
    const GET_HEADER = {
        'content-type': 'application/x-www-form-urlencoded',
        'token': wx.getStorageSync('token')
    }
    return await request(api, GET_METHOD, GET_HEADER, params)
}
module.exports = {
    POST: post,
    GET: get
}

所用到的一些consloe骚操作

console内使用CSS样式

consloe里面使用%c进行css样式格式化输出实例

console.log("%c Hello World", "color:green")

上述语句会输出绿色的Hello world, 效果如下。

然后你就可以根据你的css功底进行创造啦

console内获取程序运行时间

一般大家看到这个题目，第一时间想到的绝对是获取startTime，endTime再求差对不？

其实console提供一个内嵌的console.time()和console.timeEnd()，代码如下

console分组输出

有得时候，大家打开控制台看见一堆输出是不是很头疼？如何在茫茫数据中找到自己想要的数据呢？你可以使用ground分组数据，让console变得清晰明了。

效果如下

结语

我这里只是写了一些我自己常用到的一些功能，其实console对象还有很多函数。想玩一下的可以自己去尝试以下，发挥自己的想象力就会发现一些很有意思的玩法

版权声明: （https://blog.thinkmoon.cn/post/297_consoleapi）本文首发于指尖魔法屋-使用console的一些骚操作来封装API请求及输出相关日志转载或引用必须申明原指尖魔法屋来源及源地址！