Vue3 uses axios interceptor to print front-end logs

1. Introduction

Many times we need to debug the front end, that is, debug the interaction between the front-end and back-end interfaces. The common way is to log, such as console.log ('log content').

This method is actually OK for a single method, but for multiple interfaces and methods, this debugging method is a little worse. Also, methods have an execution order, which sometimes affects debugging.

2. Use axios interceptor to print front-end logs

This is a more recommended method, that is, write it once and you don’t have to write console.log all the time.

Suddenly I thought of a sentence I often saw when doing tests:

It’s all about testing

To paraphrase this sentence, it's all about debugging.

1. Modify main.ts

Modify main.ts and add the following content:

html
/**
 * axios interceptor */
axios.interceptors.request.use(function (config) {
  console.log('Request parameters:', config);
  return config;
}, error => {
  return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
  console.log('Return result:', response);
  return response;
}, error => {
  console.log('Return error:', error);
  return Promise.reject(error);
});

2. Delete all console.log in home

3. Recompile and start again

Check the results as shown below:

This is the end of this article about Vue3 using axios interceptor to print front-end logs. For more relevant Vue3 using axios interceptor to print front-end logs, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!