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拖拽改变宽度的实现示例

    本文主要介绍了vue拖拽改变宽度的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue2.0项目集成Cesium的实现方法

    vue2.0项目集成Cesium的实现方法

    这篇文章主要介绍了vue2.0项目集成Cesium的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue 解决在微信内置浏览器中调用支付宝支付的情况

    vue 解决在微信内置浏览器中调用支付宝支付的情况

    这篇文章主要介绍了vue 解决在微信内置浏览器中调用支付宝支付的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 快速解决element的autofocus失效问题

    快速解决element的autofocus失效问题

    这篇文章主要介绍了快速解决element的autofocus失效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue-router二级导航切换路由及高亮显示的实现方法

    vue-router二级导航切换路由及高亮显示的实现方法

    这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • Vant中Popover气泡弹出框位置错乱问题解决

    Vant中Popover气泡弹出框位置错乱问题解决

    这篇文章主要为大家介绍了Vant中Popover气泡弹出框位置错乱问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • axios模块化封装实例化及vue本地解决跨域方案

    axios模块化封装实例化及vue本地解决跨域方案

    这篇文章主要为大家介绍了axios模块化封装实例化及vue本地解决跨域示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue-for循环嵌套操作示例

    vue-for循环嵌套操作示例

    这篇文章主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • vue项目前端加前缀(包括页面及静态资源)的操作方法

    vue项目前端加前缀(包括页面及静态资源)的操作方法

    这篇文章主要介绍了vue项目前端加前缀(包括页面及静态资源)的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • VUE利用vuex模拟实现新闻点赞功能实例

    VUE利用vuex模拟实现新闻点赞功能实例

    本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论