今回は自身で開発・運営している「Hello Books」で利用している技術について紹介したいと思います。

Hello Booksについて

エンジニア向け技術書レビューサービス
購入前の判断にエンジニアのレビューを役立てることができる
アカウントを作成することで自身もレビューを投稿したり、技術書をブックマークしたりできる
詳細な条件による技術書の検索が可能

axiosについて

Hello BooksのフロントエンドはReactを使っています。Reactを使って実装を行う際にはAPI通信にaxiosを利用することも多いと思います。

axiosのエラーハンドリングは通常リクエストから取得されるPromiseのcatch節で行われると思います。個別ケースのエラーハンドリング実装であれば"呼び出し箇所のcatch節でエラーハンドリングする"として問題ないと思いますが、ある特定のエラーに対応するためにレスポンスを毎回確認する様な必要がある場合には個々の呼び出し元catch節でハンドリングを行うのはあまりに冗長な実装になってしまいます。

グローバルエラーハンドリングには様々なアプローチがあると思いますが、今回はaxiosのinterceptorsを利用してお手軽に対応する方法を紹介します。

axiosインスタンスの設定

export const api = axios.create({
    baseURL: process.env.REACT_APP_URL_SCHEME,
    timeout: 30000,
});


api.interceptors.response.use(
    response => response
    , error => {
        console.log(error.response);

        // TODO: グローバルに対応したいエラーハンドリング処理を実装する

        return Promise.reject(error);
    });

axios.createとしてaxiosのインスタンスapiを定数として作成しています。exportしているので、こちらのインスタンスはシングルトン的に他ファイルからも参照可能です。

あとは作成したapiインスタンスにinterceptorsを設定するだけで完了です。このaxiosインスタンスを利用してAPIリクエストを行う様にすればinterceptorsによるグローバルエラーハンドルが行われます。これらのハンドリングは個別の呼び出し箇所で設定されているthen・catchより前の段階で実行されます。お手軽ですね！

今回はresponseに対してinterceptorsを設定していますが、interceptors.requestとすることでリクエストに対してもinterceptorsを設定することが可能です。

ここで紹介したのはいちれいですので、詳細についてはaxiosの公式githubをご参照ください。

最後に

最後まで読んでくださり、ありがとうございました。複雑な処理や要件を実装する必要がある場合にはaxiosのinterceptorsだけでは対応できないこともおあるかもしれませんが、比較的シンプルな処理であれば簡単に実装できます。よろしければHello Booksにも是非遊びに来てください！