axios的數據攔截(攔截器)

来源:https://www.cnblogs.com/jinfeixiang/archive/2020/01/15/12196696.html
-Advertisement-
Play Games

大家在開發項目中是否遇到過數據延遲，舉個例子 你點某個功能 會有 1-2s的延遲，這1-2s可能會在你的頁面顯示一個一直轉著圈圈的動畫，不知道有沒有小伙伴還不知道這個功能是如何實現的呢？其實在一個項目中 這是非常常見的，如果你使用的有 element ，element上有個 loading 熟悉 它 ...


　　大家在開發項目中是否遇到過數據延遲，舉個例子 你點某個功能 會有 1-2s的延遲，這1-2s可能會在你的頁面顯示一個一直轉著圈圈的動畫，不知道有沒有小伙伴還不知道這個功能是如何實現的呢？其實在一個項目中 這是非常常見的，如果你使用的有 element ，element上有個 loading 熟悉 它是 element封裝好的，你只需要直接拿來使用便可，但如果你的項目需求不允許，或需要自己實現這個功能的時候，我們該如何實現呢？當然這隻是其中的一個功能，還能起到很多作用，後期小編會不斷完善。

1.  interceptor 攔截器，無論是請求階段攔截，還是 響應階段攔截，他們都有兩個參數分別是成功函數，失敗函數。

2. 請求階段攔截

　　註意：config必須返回，你攔截它，肯定要做些事

　　

 

 

 

 

 

3. 響應階段攔截

　　

 

 

 

 

作者：晉飛翔
手機號(微信同步)：17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝！！！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • vue常用插件之視頻播放（rtmp m3u8）
    vue video player(5.0.2) 最近我的項目做了一個監控視屏的顯示，後臺提供的視屏格式是rtmp 後來又改為m3u8，沒成功，原因是占用記憶體過大，所以取消了這種方式 一、安裝 npm i vue video player S npm i videojs flash S lxx___播 ...
  • vue(一)--監聽事件
    1.vue-on:監聽事件： demo:點擊按鈕，number+1 v-on 還可以縮寫為 @ 2.事件修飾符 .stop：等同於JavaScript中的event.stopPropagation()，阻止冒泡（通俗講就是阻止事件向上級DOM元素傳遞） .prevent：等同於JavaScript中 ...
  • JQ input輸入框回車生成標簽，可刪除，並獲取標簽的值
    在網上找的，效果如下 html代碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <title>flat-ui標簽</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten ...
  • vue踩坑：vue+ element ui 表單驗證有值但驗證失敗。
    一.如圖：有值但是驗證失敗 二. 1 <el-form :model="form" :rules="rules"> 2 <el-form-item label="數據模板" prop="template" > 3 <el-col :span="20"> 4 <el-input type="texta ...
  • vue常用插件之圖片預覽
    v viewer(1.4.2) 非常實用的圖片預覽插件，支持旋轉、縮放、翻轉等操作 一、npm安裝 npm i v viewer S 二、全局引入(main.js中) 三、使用 相關配置項 效果圖 ...
  • jQuery---下拉菜單案例
    下拉菜單案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-s ...
  • jQuery---過濾選擇器
    過濾選擇器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>我是第1個li</li> <li>我是第2個li</li> <li ...
  • Error in nextTick: "TypeError: Cannot set property 'xxx' of undefined"解決辦法
    vue項目在控制臺中報這個錯誤時，當看到nextTick詞時想到vue的$nextTick()方法 Vue 在更新 DOM 時是非同步執行的。只要偵聽到數據變化，Vue 將開啟一個隊列，並緩衝在同一事件迴圈中發生的所有數據變更，也就是說，vue賦一個值，並不是立即生效，而是下一個事件觸發時更新 為了在 ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類