axios封裝及其核心功能

2021-10-12 01:43:40 字數 1778 閱讀 2908

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

const instance = axios.create()

return instance()

//或者

return instance.request()

很好奇:例項在不顯示呼叫request的情況下是怎麼觸發request的呢?直接瀏覽原始碼找答案吧。

1. 例項化函式之createinstance:初始化和建立例項的重要方法。

function createinstance(defaultconfig) 

是個閉包

module.exports = function bind(fn, thisarg)

};};

重點:var instance = bind(axios.prototype.request, context)

bind的返回的是個閉包函式wrap,使不同axios例項之間可以隔離作用域。

所有的請求[axios, axios.get, axios.post等...]內部呼叫的都是axios.prototype.request

完美解決了開篇的疑惑。

2. 核心方法之request:返回promise

request方法返回promise(l54),可能是鏈式呼叫的promise,這才是axios請求真正的返回值!

那麼axios可以傳送哪些請求呢?看l39,一層層找:可以傳送瀏覽器和node請求

function getdefaultadapter()  else if (typeof process !== 'undefined') 

return adapter;

}

3. 超級特性之***

封裝的時候經常會定義一些自己的request/response***,axios是如何處理的呢?request方法裡寫的明明白白,回到l39:

先定義乙個***中介軟體chain,推入dispatchrequestundefined2個值。request(l43)***推入頭部,response(l47)***推入尾部,然後通過while迴圈實現鏈式呼叫。

下圖看起來會更加直觀和清晰:

chain

總之:request***先加入後執行,response***先加入先執行。

專注核心功能

當我還小的時候,出了什麼毛病都愛用風油精。無論是蟲叮蚊咬,暈車暈船還是感冒發燒,風油精都能派上用場。因此當我頗為自豪的向我的小夥伴炫耀道 風油精什麼都能治 的時候,他的一句 風油精什麼都能治,什麼都治不好 著實給我潑了一頭冷水。我無意斥責那些多功能產品。事實上,很多多功能產品非常成功而且確實給使用者...

專注核心功能

當我還小的時候,出了什麼毛病都愛用風油精。無論是蟲叮蚊咬,暈車暈船還是感冒發燒,風油精都能派上用場。因此當我頗為自豪的向我的小夥伴炫耀道 風油精什麼都能治 的時候,他的一句 風油精什麼都能治,什麼都治不好 著實給我潑了一頭冷水。我無意斥責那些多功能產品。事實上,很多多功能產品非常成功而且確實給使用者...

部落格的核心功能

我訂閱了很多感興趣的部落格內容,嘗試了很多 的部落格功能,自己也做了部落格程式給 的使用者使用。這些都做完以後,我認真在網上找關於部落格的定義,部落格和論壇 個人站點的區別等。1 部落格是繼email bbs icq之後出現的第四種網路交流方式。部落格有三大作用 1 個人自由表達 2 知識過濾與積累...