【Vue.js】axiosでAPIのデータを操作する②
スポンサードリンク
おはようございます。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); }); },
Header
認証に利用する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についての理解を深めていただければ幸いです。
今回の記事はこれで終了です。
【参考サイト】