Vue3 使用axios拦截器打印前端日志

 更新时间:2021年11月15日 10:05:30   作者:久曲键  
这篇文章主要介绍了Vue3 使用axios拦截器打印前端日志,这是一种比较值得推荐的方式,也就是写一次,就不用总写console.log了。下面来看看文章的详细内容,需要的朋友可以参考一下

一、前言

很多时候我们需要对前端进行调试,也就是前后端接口之间交互的调试,常用的方式肯定是打日志了,如console.log ('日志内容')。

就单个方法其实用这种方法是可以的,多个接口和方法,这样的调试方法就差了一些,再有就是方法有执行顺序,有时候反倒影响调试了。

二、使用axios拦截器打印前端日志

这是一种比较值得推荐的方式,也就是写一次,就不用总写console.log了。

突然想到,做测试时候,常看到的一句话:

一切都是为了测试

套用下这个句式,就是一切都是为了调试。

1、修改main.ts

修改main.ts,增加如下内容如下:

html
/**
 * axios拦截器
 */
axios.interceptors.request.use(function (config) {
  console.log('请求参数:', config);
  return config;
}, error => {
  return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
  console.log('返回结果:', response);
  return response;
}, error => {
  console.log('返回错误:', error);
  return Promise.reject(error);
});

2、删除home中所有console.log

3、再次重新编译、启动

查看结果如下图:

到此这篇关于Vue3 使用axios拦截器打印前端日志 的文章就介绍到这了,更多相关Vue3 使用axios拦截器打印前端日志 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现万年日历的示例详解

    Vue实现万年日历的示例详解

    又是一个老生常谈的功能,接下来会从零实现一个万年日历,从布局到逻辑,再到随处可见的打卡功能。文中的示例代码简洁易懂,需要的可以参考一下
    2023-01-01
  • vue数组中不满足条件跳出循环问题

    vue数组中不满足条件跳出循环问题

    这篇文章主要介绍了vue数组中不满足条件跳出循环问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue中的适配px2rem示例代码

    vue中的适配px2rem示例代码

    这篇文章主要给大家介绍了关于vue中适配px2rem的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue中的计算属性与监听属性

    Vue中的计算属性与监听属性

    这篇文章介绍了Vue中的计算属性与监听属性,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue-router 中 meta的用法详解

    vue-router 中 meta的用法详解

    今天小编就为大家分享一篇vue-router 中 meta的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue-pdf实现pdf在线预览并实现自定义预览框高度

    vue-pdf实现pdf在线预览并实现自定义预览框高度

    这篇文章主要介绍了vue-pdf实现pdf在线预览并实现自定义预览框高度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中(el-button的五种类型,三种css格式)

    vue中(el-button的五种类型,三种css格式)

    这篇文章主要介绍了vue中(el-button的五种类型,三种css格式)具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue3+axios+Mock.js实现登录功能的示例代码

    Vue3+axios+Mock.js实现登录功能的示例代码

    本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • uniApp h5项目如何通过命令行打包并生成指定路径及文件名称

    uniApp h5项目如何通过命令行打包并生成指定路径及文件名称

    用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下
    2024-02-02
  • vue 弹框产生的滚动穿透问题的解决

    vue 弹框产生的滚动穿透问题的解决

    这篇文章主要介绍了vue 弹框产生的滚动穿透问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论