Vue3 使用axios攔截器打印前端日志
一、前言
很多時候我們需要對前端進行調(diào)試,也就是前后端接口之間交互的調(diào)試,常用的方式肯定是打日志了,如console.log ('日志內(nèi)容')。
就單個方法其實用這種方法是可以的,多個接口和方法,這樣的調(diào)試方法就差了一些,再有就是方法有執(zhí)行順序,有時候反倒影響調(diào)試了。
二、使用axios攔截器打印前端日志
這是一種比較值得推薦的方式,也就是寫一次,就不用總寫console.log了。
突然想到,做測試時候,??吹降囊痪湓挘?/p>
一切都是為了測試
套用下這個句式,就是一切都是為了調(diào)試。
1、修改main.ts
修改main.ts,增加如下內(nèi)容如下:
html
/**
* axios攔截器
*/
axios.interceptors.request.use(function (config) {
console.log('請求參數(shù):', 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攔截器打印前端日志 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解vuejs2.0 select 動態(tài)綁定下拉框支持多選
這篇文章主要介紹了vuejs2.0 select動態(tài)綁定下拉框 ,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue3 element plus中el-radio選中之后再次點擊取消選中問題
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
瀏覽器事件循環(huán)與vue nextTicket的實現(xiàn)
這篇文章主要介紹了瀏覽器事件循環(huán)(結合vue nextTicket)的實現(xiàn)方法,需要的朋友可以參考下2019-04-04

