【JavaScript】axiosとリポジトリパターン

　Microsoftはリポジトリパターンを次のように説明しています。

リポジトリは、データソースへのアクセスに必要なロジックをカプセル化するクラスまたはコンポーネントです。
インフラストラクチャの永続レイヤーの設計 ｜ Microsoft Docs

　要はファイルやDBとのやり取りはそれだけでまとめておくべき、ということです。これはデータの操作を行う目的のAPI通信でも適用できます。axiosに関する処理をリポジトリパターンに沿って記述するときれいにまとまります。
　axiosはJavaScriptのHTTP通信用ライブラリです。非同期通信によってあるwebページを開いたままページの持つデータを更新する様な時などによく使われます。
axios/axios： Promise based HTTP client for the browser and node.js
axios – npm
　上記リンクから見れるリファレンスの中で#request-config, #config-defaults, #interceptorsに注目します。それぞれaxiosの設定、割り込み処理についての記述であり、どの通信においても共通の処理を行いたいことの多い部分です。このためaxiosを用いる際には、

// usage.js
import axios from 'axios';
axios.get(hogehoge)...

とするのでなく

// repository.js
import axios from 'axios';
export default axios.create({
    // axiosの設定
});

// usage.js
import repository from './repository';
repository.get(hogehoge)...

とした方が適切な範囲の共通化ができ、便利です。
　axiosで通信する対象の多くはAPIとしてまとめられた何かであり、それはあるアドレスである範囲のモノを表しています。これを利用してさらに次のように共通化と分割を適切な範囲で行えます。

// UserRepository.ts
import Repository from './Repository';

const resource = '/user';
/**
 * ユーザの情報を取得するためのリポジトリクラス.
 */
export default class UserRepository {
    /**
     * ユーザ情報取得メソッド.
     * @param id ユーザ番号
     */
    static show(id: number) {
        return Repository.get(`${resource}/${id}`);
    }
        /**
     * ユーザ情報更新メソッド.
     * @param id   ユーザ番号
     * @param data ユーザ情報
     */
    static update(id: number, data: any) {
        return Repository.post(`${resource}/${id}`, data);
    }
}
// usage.ts
import UserRepository from './UserRepository';
const response = await UserRepository.show(2);

　上の例ではLaravelのCRUDコントローラ的にまとめようとしていますが、記述に統一ができていればもっと自由に作ってもよいと思います。例えば、更に一階層下や同階層サービスにクエリビルダ的なモノを作ってDBらしくするやり方など出番がありそうです。