*netflixクローンページ共通ロードコンポーネントの作成

-必須の実装

App.AppLoadingは、vue内の各コンポーネントのAPI要求を確認することによってロード状態を表示します.vue構成部品を作成する

現在アクセスしているコンポーネントで発生しているすべてのAPI要求が完了したかどうかを確認するために使用できる論理を参照します.

アクセスした構成部品については、キャッシュデータを使用してAPI[]を再要求しないでください.

ハイブリッド、プラグイン、およびVue-routerナビゲータを使用して汎用論理処理を参照[]

2021.05.09

🎉 TODO

汎用ロードコンポーネントを作成します.[✔]

ページにアクセスした場合は、キャッシュを使用したページで、現在のページをキャッシュされたページに登録します.

キャッシュされたデータがあり、キャッシュされたページを使用している場合は、キャッシュされたデータがロードされます.

🎉 1.AxiosキャッシュとAPIキャッシュの使用

キャッシュとは?

ディスクキャッシュとは

参考:メモリキャッシュとディスクキャッシュ

2.キャッシュをAxiosアダプタとして使用

2.1headers: { "Cache-Control": "no-cache" }Axiosオプションに適用した場合の要求ヘッダの違い

写真参考

2.2 Axiosオプションに適用されていない場合headers: { "Cache-Control": "no-cache" }ヘッダーの相違を要求

写真参考

2.2 Axiosオプション適用adapter: cacheAdapterEnhancer(axios.defaults.adapter)デフォルトでは、キャッシュはすべてのAPI要求に適用されます.同じAPI要求が発生した場合、ネットワーク要求は行わず、キャッシュされたデータを取得する.
良い方法:リンクを直接クリックまたはリフレッシュする場合は、新しいデータが受信されていることを確認し、ページに戻るか前進するときにキャッシュされたデータを使用します.
2.3 Axiosキャッシュの適用

Axios instance

const instance = axios.create({
    baseURL: process.env.VUE_APP_TMDB_END_POINT,
    headers: { "Cache-Control": "no-cache" },
    params: {
        api_key: process.env.VUE_APP_TMDB_API_KEY,
    },

    //1.
    adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
        enabledByDefault: false,
    }),
});

APIソース

// 영화 리스트
export const fetchMovies = async (category, page) => {
    page || (page = 1);
    const url = `/movie/${category}?page=${page}`;
    return await movieAxios.get(url, {
        // 2.
        forceUpdate: //
        // 3.
        cache: true,
    });
};

APIにキャッシュを適用して、有用な映画のリストを取得します.

axiosインスタンス作成時に使用enabledByDefault: falseオプションデフォルトでキャッシュを無効にします.

・forceUpdate: trueキャッシュされたデータを使用せずに新規データを要求する.したがって、この部分では、ページがリフレッシュされているか否かを判断し、後ろ/前に進むか否かを判断し、true/falseオプションを適用する必要がある.

cache: trueキャッシュを使用するように設定

参考

API Cacheを使用したSPAページのユーザーエクスペリエンスの強化

Axios API Cacheの利用