點燈坊

失くすものさえない今が強くなるチャンスよ

タグ : Axios

Axios 簡介

Axios 為前端最通用的存取 REST API 套件,且支援 Promise,讓我們可以簡單地以非同步方式存取 REST API。

呼叫 API 顯示 Nested Promise

若 API 遵循 RESTful 精神設計,常會第一個 API 僅回傳 id,若要取得其值就要呼叫第二個 API,也就是所謂 N + 1,本文分別以 Aysnc Await、Promise Chain 與 RxJS 三種寫法示範。

SweetAlert2 之 Error Handling

一般來說呼叫 API 的 Asynchronous 才會遇到 Promise,也才需要 Error Handling,但 SweetAlert2 按下 Confirm 時回傳 Fulfilled Promise,按下 Cancel 時回傳 Rejected Promise,此時會進入處理 API 的 Error Handling,這該如何解決呢 ?

如何對 API 回傳資料加上 Cache ?

若 API 每次傳入的 Query String 相同,所回傳的結果也相同,對於這類 API 可以加上 Cache,當參數相同時,就不再發起 API Request,如此不但節省後端資源,使用者體驗更佳。事實上 ECMAScript 的 Closure + IIFE 就能實作出 Cache,並不需要依賴其他 Library。

如何處理相依性 API ?

實務上有些 API 呼叫有順序性,無論 Promise 或 Observable 都是 Asynchronous,不保證回傳順序也不保證一定成功,因此處理這些 Asynchronous 動作並不像 Synchronous 般簡單。

如何管理 JWT Token ?

管理 JWT Token 是前端不可避免的課題,若只透過 Vuex 或 Local Storage 都有其缺憾,唯有同時結合 Vuex 與 Local Storage 才是最完美方案。