[JAVASCRIPT學習筆記] 為前端請求做快取(cache)

axios 有一個第三方庫 axios-extensions,提供了緩存、節流和重新請求的 API 使用。

使用方法

STEP 1

首先需要安裝 axios 及 axios-extensions:

npm install axios
npm i axios-extensions -S
// or
yarn add axios
yarn add axios-extensions

或者你也可以透過 script 引入:

<script src="https://unpkg.com/axios-extensions/dist/axios-extensions.min.js"></script>
STEP 2

有三個 API 可以使用:

  • cacheAdapterEnhancer(adapter: AxiosAdapter, options: Options): AxiosAdapter
    • 使用 cacheAdapterEnhancer 時需要設定 headers.Cache-Control 為 no-cache
  • throttleAdapterEnhancer(adapter: AxiosAdapter, options: Options): AxiosAdapter
    • 可與 cacheAdapterEnhancer 一起使用
  • retryAdapterEnhancer(adapter: AxiosAdapter, options: Options): AxiosAdapter

Cache

因為官方 README 已經介紹了基本使用方法,所以這邊就分享一下我的實際應用:

import axios from "axios";
import { cacheAdapterEnhancer, throttleAdapterEnhancer, Cache } from 'axios-extensions';

const adapter = throttleAdapterEnhancer(
    cacheAdapterEnhancer(
        axios.defaults.adapter,
        {
            enabledByDefault: true, // 預設啟用快取
            defaultCache: new Cache({ maxAge: 1000 * 60 * 2, max: 30 }) // 快取保存時間為 2 分鐘,一次保存 30 筆資料
        }
    ),
    { threshold: 2 * 1000 } // 節流的延遲時間
);


export const request = axios.create({
    baseURL,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Cache-Control': 'no-cache'
    },
    adapter // 加上適配器
});
STEP 3

當需要視情況獲取快取或非快取資料時可以傳遞一個參數給 cache:

// 基本使用
export const getUserList = () => request.get("user/list", { params: data });
export const getUserInfo = (id) => request.get(`user/${id}`);

// 個別情況
export const getUserList = (refresh) => request.get("user/list", { params: data, cache: !refresh });
export const getUserInfo = (id, refresh) => request.get(`user/${id}`, { cache: !refresh });

還有更詳細的使用方法請參考官方文檔:https://www.npmjs.com/package/axios-extensions

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論