5-6 使用axios拦截器打印前端日志

孤注一掷、

于 2022-02-28 15:49:27 发布

阅读量1.5k

点赞数

分类专栏： SpringBoot 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/Sunweikai123/article/details/123183965

版权

本文介绍了如何利用axios的拦截器功能在前端进行日志打印，以简化调试过程。通过在main.ts中配置拦截器，可以统一处理请求前后的日志记录，避免在业务代码中分散插入日志代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打日志是前端常用的简单的调试方式。

每次调用后端接口之前打一个日志，发送的结果的回调函数里面，我们再打一个日志。撒大声地

axios提供了拦截器功能，我们可以在拦截器里面，把请求日志和返回参数一起打印出来。

这样业务代码里面就不用去打。

先在main.ts中添加如下：

/**
 * 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);
});

这样，如下代码可以删除：