axios學習筆記

来源:https://www.cnblogs.com/shenjun980326/archive/2022/09/26/axios.html
-Advertisement-
Play Games

###1. 後端配置 新建一個CrosConfig.java文件(配置類),允許任意請求發送 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Confi ...


1 axios的理解和使用

1.1 axios是什麼

  1. 前端最流行的ajax請求庫
  2. react/vue官方都推薦使用axios發ajax請求
  3. 文檔地址

1.2 axios特點

  1. 基於xhr+promise 的非同步ajax請求
  2. 瀏覽器端/node 端都可以使用
  3. 支持 請求/響應 攔截器
  4. 支持請求取消
  5. 請求/響應 數據轉換
  6. 批量發送多個請求

1.3 axios常用語法

  1. axios(config):通用/最本質的發送任意類型請求的方式
	axios({
		method:'',
		url:'',
		data:''
	})
  1. axios(url[,config]):可以只指定url發get請求
	axios('',{})
  1. axios.request(config):等同於axios(config)
  2. axios.get(url,[,config]):發get請求
	axios.get('',{})
  1. axios.delete(url,[,config]):發delete請求
	axios.delete({
		url:''
		params:{}
	})
  1. axios.post(url[,data[,config]]):發post請求
	axios.post('',{},{})
  1. axios.put(url[,data[,config]]):發put請求
	axios.put('',{},{})
  1. axios.default.xxx: 請求的預設全局配置
	axios.defaults.method = 'GET';//設置預設的請求類型為 GET
	axios.defaults.baseURL = 'http://localhost:3000';//設置基礎 URL
	axios.defaults.params = {id:100};
	axios.defaults.timeout = 3000;
  1. axios.interceptors.request.use():添加請求攔截器
	axios.interceptors.request.use(function (config) {
		console.log('請求攔截器 成功 - 1號');
		//修改 config 中的參數
		config.params = {a:100};
		return config;
	}, function (error) {
		console.log('請求攔截器 失敗 - 1號');
		return Promise.reject(error);
	});
  1. axios.interceptors.response.use(): 添加響應攔截器
	axios.interceptors.response.use(function (response) {
		console.log('響應攔截器 成功 1號');
		return response.data;
	}, function (error) {
		console.log('響應攔截器 失敗 1號')
		return Promise.reject(error);
	});

1.4 難點語法的理解和使用

1.4.1. axios.create(config)

  1. 根據指定配置創建一個新的 axios, 也就就每個新 axios 都有自己的配置
  2. 新 axios 只是沒有取消請求和批量發請求的方法, 其它所有語法都是一致的
  3. 為什麼要設計這個語法?
    • 需求:項目中有部分介面需要的配置與另一部分介面需要的配置不太一樣, 如何處理
    • 解決: 創建2個新axios, 每個都有自己特有的配置, 分別應用到不同要求的介面請求中

1.4.2 攔截器函數/ajax 請求/請求的回調函數的調用順序

  1. 說明: 調用 axios()並不是立即發送 ajax 請求, 而是需要經歷一個較長的流程
  2. 流程: 請求攔截器2 => 請求攔截器1 => 發ajax請求 => 響應攔截器1 => 響應攔截器 2 => 請求的回調
  3. 註意: 此流程是通過 promise 串連起來的, 請求攔截器傳遞的是 config, 響應攔截器傳遞的是 response

筆記來源(尚矽谷)


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

-Advertisement-
Play Games
更多相關文章
  • 前言 什麼是Redis Redis是一個基於記憶體的key-value結構資料庫。Redis 是互聯網技術領域使用最為廣泛的存儲中間件,它是「Remote Dictionary Service」的首字母縮寫,也就是「遠程字典服務」。 [ ] 基於記憶體存儲,讀寫性能高 [ ] 適合存儲熱點數據(熱點商品 ...
  • 摘要:本文主要介紹 Presto 如何更好的利用 Hudi 的數據佈局、索引信息來加速點查性能。 本文分享自華為雲社區《華為雲基於 Apache Hudi 極致查詢優化的探索實踐!》,作者:FI_mengtao。 背景 湖倉一體(LakeHouse)是一種新的開放式架構,它結合了數據湖和數據倉庫的最 ...
  • 雲端分析是針對 CocoaPods 依賴管理雲端化的優化方案。對大量重覆的 iOS 工程構建任務進行了收斂和資源復用,在保證正確性的前提下達到了加速依賴管理速率的目的,實現了 Pod install 分析階段提速 60% 以上的能力。 ...
  • 華為帳號自擬形象上線啦!用戶只需一張照片,即可輕鬆創建屬於自己的華為帳號自擬形象,還能對形象進行個性化裝扮,DIY髮型、服裝、配飾等。點擊“手機設置 > 華為帳號 > 自擬形象 ”即刻擁有手機中的另一個你。 華為帳號自擬形象提供數個預置虛擬形象供用戶直接使用,用戶也能夠通過拍攝/上傳照片,一鍵生成照 ...
  • 模塊 HTML 網頁中,瀏覽器通過<script>標簽載入 JavaScript 腳本。 <!-- 頁面內嵌的腳本 --> <script type="application/javascript"> // module code </script> <!-- 外部腳本 --> <script ty ...
  • Vue2動態添加路由 點擊打開視頻講解更加詳細 場景: 一般結合VueX和localstorage一起使用 router.addRoutes vue-router4後 已廢棄:使用 router.addRoute() 代替。 vue-router4版本前也可用 函數簽名: router.addRou ...
  • #概述 webpack的使用中我們會遇到各種各樣的插件、loader。 webpack的功力主要體現在能理解各個插件、loader的數量上。理解的越多功力越深 loader是什麼呢? #背景 瞭解loader前,我們在來看個問題,有了前面的基礎我們還是用個簡單的樣例來說明 由於一切都是模塊,我們想用 ...
  • Vue 響應式數據 什麼是響應式數據:數據變了,視圖能更新,反之視圖更新,數據要不要更新,不歸響應式數據管。 Vue 在內部實現了一個最核心的defineReactive方法,藉助了Object.defineProperty,核心就是劫持屬性(只會劫持已經存在的屬性),把所有的屬性,重新的添加了 g ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...