Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Vue.js】axiosでAPIのデータを操作する②


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20211218162349j:plain

おはようございます。Shotaです。

今回は前回に引き続き、VuejsでaxiosのAPI操作について詳細に解説していきます。

今回の記事では、基本的な操作よりもaxios通信を効率化させる方法に注力して解説を進めていきます。

それでは早速、本題に入りましょう。



リクエスト設定

前回の記事ではget, postのようなリクエストに関する動作確認の説明を行ってきましたがそれ以外にリクエストに関する設定を行うことができます。利用頻度が高く各所で利用されている設定を中心に説明を行います。


baseURL

本記事は短いコードなのでコード中にアクセス先であるhttps://jsonplaceholder.typicode.com/を何回も記述することはありませんでしたが、アプリを開発する際に何回も同じURLを書くのは冗長になります。axiosではdefaultsでアクセスするドメインのURLを設定できます。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

baseURLを設定した場合、getメソッドを実行する際にはbaseURLで設定したURLを省略できます。

mounted() {
  axios
    .get('/users') //baseURLを設定
    .then((response) => (this.users = response.data))
    .catch((error) => {
      console.log(error);
    });
},


認証に利用するTokenなどをHeaderに設定したい場合があります。default値に設定することでaxiosでリクエストごとにヘッダーを設定する必要がなくなります。token_idにはサーバから取得したToken情報を保存します。

axios.defaults.headers.common['Authorization'] = `Bearer token_id`;


Interceptorの設定

axiosからリクエストを送信する際、またサーバからレスポンスが戻ってきた場合にRequest, Responseオブジェクトに対して処理を追加できます。


Requestの場合

例えば、リクエストの設定内容を確認したい場合は以下のように記述することで確認できます。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.interceptors.request.use((config) => {
  console.log(config)
  return config;
});


responseの場合

responseではステータスコードなどのようなサーバ側から戻ってきた情報を確認できます。

axios.interceptors.response.use((response) => {
  console.log(response);
  return response;
});

responseは認証が行われている環境で認証に失敗しステータスコード401(Unauthorized)が戻ってきた場合にlogout処理を行うというような使い方があります。

各レスポンスのステータスコードを確認することでそれぞれのコードに応じた処理を実装できます。

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      //logoutの処理を記述する
    }
    return Promise.reject(error);
  }
);


ファイルアップロードの進捗

axiosを利用してサーバへファイルのアップロードを行いたい場合、ファイルアップロードの進捗を知りたい場合にプログレスバーが利用されます。

axiosでも現在のアップロードの進捗を知ることができます。第三引数に以下のように設定を行い、progressEventでファイル全体のサイズprogressEvent.totalにアップロードされたサイズprogressEvent.loadedで確認できます。

const form = new FormData();

form.append('file',event.dataTransfer.files[0]);

axios.post('/api/karte_file',form,{
    onUploadProgress: progressEvent => {
        console.log(progressEvent.loaded)
        console.log(progressEvent.total)
    }
});

この値を割ることで全体に対する現在の進捗状況を知ることができます。

ratio = Math.floor((progressEvent.loaded)*100/progressEvent.total) + '%';


まとめ

今回の記事では、前回の記事と同様にVuejsでaxiosのデータを操作する方法を徹底解説しました。

今回の記事を参考に、axiosについての理解を深めていただければ幸いです。

今回の記事はこれで終了です。

【参考サイト】

reffect.co.jp