重寫axios核心原理

2021-10-13 16:31:02 字數 3760 閱讀 8938

// 方式一:

axios()

// 方式二:

)

結論:axios可以通過傳進去乙個配置物件去傳送ajax,或者通過axios.***去發起ajax。

實現axios({})這種形式:

}}// 建立axios的function

function

createaxiosfn()

const axios =

createaxiosfn()

axios()

.then

((res)

=>

);實現axios.***方式:

}}// 常用的http請求方法

const methods =

['get'

,'post'

,'put'

,'patch'

,'delete'

,'head'

,'options'

]methods.

foreach

(mt =>)}

)}else)}

)}}}

)// 通用的繼承方法, target:目標物件, origin:複製物件 ctx:this

);

// ***的管理器

);

***的工作原理:

每乙個***就是乙個promise,只不過只有傳送ajax的那個需要耗費久一點的時間而已。我們每axios.interceptor.***.use就會往chains這個陣列插入乙個***。

// 初始化chains陣列,讓傳送ajax的promise位於中間

const chains =

[this

.sendajax.

bind

(this

), undefined]

;// request的***就放在傳送ajax的前面

this

.interceptor.request.handlers.

foreach

((hd)

=>);

// response的***就放在傳送ajax的後面

this

.interceptor.response.handlers.

foreach

((hd)

=>);

// 這裡形成我們上面那幅圖的結構

let promise = promise.

resolve

(config)

;// 起點

while

(chains.length >0)

return promise;

// 能獲取結果的promise

收穫:看了原始碼,只能更好的使用和理解axios。axios的***的實現思路真的很棒,利用promise的鍊子一條一條的傳下去。

axios封裝及其核心功能

專案中用到了axios,需要對其進行簡單封裝,統一資料處理和錯誤資訊等。發現傳送請求的時候可以直接例項呼叫,不是必須顯示呼叫request。下面2種都可以 const instance axios.create return instance 或者 return instance.request 很...

axios 內部原理學習記錄

前提 一次面試被問到了,axios有什麼特點,對比一下ajax。答的很不滿意。axios是乙個基於promise的http請求庫,可用於瀏覽器和 node。可以說是目前最為常用的http庫,有必要了解一下其內部的實現原理。同時支援瀏覽器端和服務端的請求。由於axios的這一特性,vue的服務端渲染對...

jvm 過載重寫原理

乙個過載的栗子 class parent class child extends parent class overload 這個是呼叫的是 overload parent p 方法。雖然p的實際引用型別是child 這要提到兩個重要的概念 上段栗子中,對於物件p來說,parent稱為其 靜態型別或...