axios.interceptorsで共通処理を行う

axios はサーバと非同期に通信を行う HTTP クライアントの 1 つで、 Laravel でもbootstrap.jsで読み込まれています。

Vue と組み合わせる場合コンポーネントのメソッドにaxios.get()やaxios.post()など処理と組み合わせて呼び出すのですが、全体を通して共通させたい処理(エラーハンドリングなど)がある場合、interceptorsを使って処理に割り込むことができます。

axios.interceptors.request.use(config => {
  return config;
});

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    return error;
  }
);

axios/axios: Promise based HTTP client for the browser and node.js

interceptorsを使うと、response や error の処理完了時にあわせて Snackbars を使った成功/失敗メッセージを表示することや、request 時に Progress indicators を表示して、response が返ってきたときには非表示に切り替える、または error のときは色を変更するなどのグローバルな処理ができるようになります。

p { margin-bottom: 1em; } blockquote p { margin-bottom: initial; } #content ul { padding-left: 40px; } .token.operator { background-color: initial; }