是時候該換掉你的axios了

語言: CN / TW / HK

theme: smartblue

axios是一個基於Promise的HTTP客戶端,每週的npm下載量4000W+,如果回到在10年前,promise式的請求工具是一個很大的創新,它解決了請求繁瑣的問題,在那個效能要求不那麼高的年代可謂是一騎絕塵。但隨著時間的推移,Axios在開發效率和效能方面開始有所落後,現在都已經是2023年了,面對日益複雜的需求,我們需要的是一款更具創新性和領先性的請求工具,而promise式的請求工具只能被稱為傳統了,如果你想保持在快速發展的前沿,那麼請繼續閱讀。

首先我想宣告的是,我確實不是標題黨,接下來我將通過暴露隨著時間的推移,axios在一些方面表現的力不從心,並推薦一個新的,相比axios更具現代化和創新性的請求工具給你,它就是 輕量級的請求策略庫alova

接下來我們看看Promise式請求工具的弱點(axios)

1. 與React、Vue等框架割裂

現在,React、Vue等前端UI框架對於前端來說幾乎是不可缺少的,axios無法和這些框架的狀態深度繫結,需要開發者自行維護它們,導致開發效率較低。

2. 在效能方面毫無作為

2023年了,相比10年前的應用已經複雜了不知幾個數量級,在請求方面要求也越來越高,來保證頁面效能的要求,axios在這方面毫無作為,例如在頻繁地重複請求、同時發起多個相同請求等場景。

3. 臃腫的體積

根據bundlephobia顯示,axios的體積在壓縮狀態下有11+kb,不信的話,你可以點此去檢視

4. 響應資料的Ts型別定義混亂

在使用axios時,你可能經常會這樣寫:

```ts // 建立一個axios例項 const inst = axios.create({ baseURL: 'https://example.com/' })

// 在響應攔截器中返回data inst.interceptors.response.use(response => { if (response.status === 200) { return response.data } throw new Error(response.status) })

interface Resp { id: number } inst.get('/xxx').then(result => { // result的型別總是為axios.AxiosResponse data.data }) `` 不知道是axios故意為之還是忽略了,以上的發起的GET請求中,響應資料result的型別總是axios.AxiosResponse的,但其實我們在響應攔截器中已經將response.data`返回了,這導致響應資料型別混亂而被困擾。

在alova中是如何解決的呢?

alova作為一個更加現代化,更加適應複雜應用的請求方案,也給出了它更加優雅的解決方案。同時為了降低給的學習成本,也保持了和axios相似的api設計,看起來就很熟悉有木有。

alova讀作“阿洛娃”,雖然和axios一樣都是以a開頭,以下兩個名稱需要注意區分哦!

與UI框架深度融合,自動管理請求相關資料

假設我們需要發起一個基本的資料獲取請求,以vue為例,直接上對比程式碼。

axios ```html

```

alova ```html

```

在axios中需要自己建立對應的請求狀態並自行維護,而alova卻幫你接管了這項工作

開箱即用的高效能功能

傳統Promise式的請求工具主要定位於通過Promise的方式簡化請求,而提高效能可能是它們最不會考慮的一點,但作為請求策略庫的alova中卻著重突出這一點,在alova中預設開啟了記憶體快取和請求共享,這兩項可以極大地提高請求效能,提升使用者體驗的同時還能降低服務端壓力,讓我們來一一瞭解下它們吧。

記憶體快取

記憶體模式就是在請求響應後將響應資料儲存在本地記憶體中,當下次再發起相同請求時就會使用快取資料,而不會再次傳送請求,試想一下,當你在實現一個列表頁,點選列表項可以進入詳情頁檢視資料,你會想到使用者可能會頻繁在列表中點選檢視詳情,當詳情資料沒有變化時,如果每一次進入詳情頁都要請求一次未免也太浪費了,而且每次還需要使用者等待載入。在alova中你可以預設享受到這樣的待遇,以下展示下效果

screenshots.gif

請求共享

你可能遇到過這種情況,當一個請求發出但還未響應時,又發起了相同請求,就造成了請求浪費,或者重複提交問題,例如以下三種場景:

  1. 一個元件在建立時會獲取初始化資料,當一個頁面同時渲染多個此元件時,將會同時發出多次相同請求;
  2. 提交按鈕未被禁用,使用者點選了多次提交按鈕;
  3. 當預載入還未完成時進入了預載入頁面,將會發起多次相同請求;

共享請求就是用來解決這些問題的,它是通過複用請求的方式來實現的,由於這種案例無法直觀展示,就不展示了,有興趣的小夥伴可以自行體驗體驗。

除此以外,自稱是請求策略庫的alova還提供了特定場景下的請求策略,我們將在下文中介紹,有興趣的小夥伴請繼續往下看。

輕量級的體積

壓縮狀態下的alova只有4kb+,只有axios的30%+,不信的話,你可以點此去檢視

更加直觀的響應資料TS型別

在axios中,你想要定義響應資料的型別真是會讓人感到困惑,如果你是個Typescript的重度使用者,alova可以給你提供完整的型別體驗,當你在請求處定義響應資料時的型別後,你可以在多處享受到它,會讓你感覺很清晰,我們來看看。

```ts interface Resp { id: number } const pageData = createAlova({ baseURL: 'http://xxx' }).Get('/index'); const { data, // data的型別為Resp loading, error, onSuccess, send } = useRequest(pageData); onSuccess(event => { // 在成功回撥中獲取響應資料時,event.data的值型別也是Resp console.log(event.data); });

const handleClick = async () => { // send函式可以手動再次傳送請求,它將可以接收到響應資料,它的值型別還是Resp const data = await send(); } ```

至此,相比傳統的Promise式請求庫,你可能已經初步瞭解了alova的厲害。

但... 它的特性還遠不止於此!

alova的其他特性

多UI框架同時支援

alova同時支援react、vue、svelte,無論你使用哪種UI框架,它都能滿足你。

與axios相似的api設計,用起來更簡單熟悉

alova的請求資訊構造幾乎和axios相同,我們來對比一下它們的GET和POST請求。

GET請求

```js // axios axios.get('/index', { // 設定請求頭 headers: { 'Content-Type': 'application/json;charset=UTF-8' }, // params引數 params: { userId: 1 } });

// alova const todoListGetter = alovaInstance.Get('/index', { // 設定請求頭 headers: { 'Content-Type': 'application/json;charset=UTF-8' }, // params引數 params: { userId: 1 } }); ```

POST請求 ```js // axios axios.post('/login', { username: 'xxx', password: 'ppp' }, { // 設定請求頭 headers: { 'Content-Type': 'application/json;charset=UTF-8' }, // params引數 params: { userId: 1 } });

// alova const loginPoster = alovaInstance.Post('/login', { username: 'xxx', password: 'ppp' }, { // 設定請求頭 headers: { 'Content-Type': 'application/json;charset=UTF-8' }, // params引數 params: { userId: 1 } }); ```

(請求策略)高效能分頁請求策略

自動維護分頁相關資料和狀態,並提供了常用的分頁資料操作能力,據官方介紹,可以讓列表頁流暢性提高300%,編碼難度降低50%,以下是官方提供的示例,有興趣的同學可以去看看。

分頁列表示例

下拉載入示例

(請求策略)無感資料互動

這個在我看來,這個無感資料互動請求策略可謂是一大創舉,我把它理解為更加可靠的樂觀更新,官網是這樣解釋的:

無感資料互動是指使用者在與應用進行互動時,無需等待即可立即展示相關內容,或者提交資訊時也無需等待即可展示操作結果,就像和本地資料互動一樣,從而大幅提升應用的流暢性,它讓使用者感知不到資料傳輸帶來的卡頓。可以更高限度地降低網路波動帶來的問題,你的應用在高延遲網路甚至是斷網狀態下依然可用。

在我的體驗過程中,即使在弱網狀態下,也可以讓我感受到一種毫無延遲帶來的順暢感,你也來感受下吧。

screenshots.gif

據我瞭解,它使用以下技術: 1. 持久化的請求佇列來保證請求的安全性和串聯性; 2. 請求重試策略機制,來保證請求的順利完成; 3. 虛擬響應資料(一個創新的概念),來作為未響應時的資料佔位,以便在響應後定位它並替換為實際資料。

關於無感資料互動更具體的可以在官網瞭解哦

資料預拉取

通過拉取資料的方式預先載入好資料並快取在本地,當真正用到這部分資料時就可以命中快取並直接顯示資料,這種方式也極大地提升了使用者體驗。

寫在最後

總之,alova作為一個新生代的請求工具,具有很大的潛力,你也想試用的話,可以點選以下連結去了解。

alova官網

alova的Github地址

寫作不易,看都看到這了,不如幫我點個免費的愛心吧!!!感謝你的喜歡