vueはelementパッケージaxiosと組み合わせて要求インタフェースごとにloadingをロードします

import axios from ‘axios’; import Qs from ‘qs’; import { Message, Loading } from ‘element-ui’;//メッセージ・プロンプト・ボックス・コンポーネント
import router from ‘./…/router/index’ import Vue from ‘vue’
let loadinginstance, loadCount = 0, loadingArray = [];
//環境の切り替えif(process.env.NODE_ENV=‘development’){axios.defaults.baseURL=‘api/’;else if (process.env.NODE_ENV == ‘debug’) { axios.defaults.baseURL = ‘api/’; } else if (process.env.NODE_ENV == ‘production’) { axios.defaults.baseURL = ‘api/’; };
//要求タイムアウト時間の設定axios.defaults.timeout = 10000;
//postリクエストヘッダaxiosを設定する.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’;
//ブロックを要求axios.interceptors.request.use(config=>{loadCount++loadinginstance=Loading.service({text:‘少々お待ちください’,//コンテンツbackground:‘rgba(28,36,51,0.8)’,//スタイルtarget:document.querySelector(’#Zbcp>.table’)/バインドDOM})loadingAry.push(loadinginstance)/postリクエストはqsパラメータを使用してif(config.data.constructor==Object&&config.method=‘post’){config.data=Qs.stringify(config.data)}return config;}をシーケンス化する必要があります.error=>{//要求エラーに対して何をするかloadCount–if(!loadCount){loadingArray.forEach(item=>item.close()}return Promise.error(error); })
//応答ブロックaxios.interceptors.response.use(response=>{//応答データに対してloadCount–if(!loadCount){loadingArray.forEach(item=>item.close()}return response;}error=>{loadCount—;if(!loadCount){loadingArray.forEach(item=>item.close()}//応答エラーに何をする//console.log(error)if(error&&error.response){switch(error.response.status){case 400:error.message='エラーリクエスト';Message({message:'エラーリクエスト',type:'error');break case 401: error.Message='権限がありません.再ログインしてください.Message({message:‘未許可、再ログインしてください’,type:‘warning’});break case 403: error.Message=「アクセス拒否」;Message({message:‘アクセス拒否’,type:‘warning’});break case 404: error.Message=「要求エラー、リソースが見つかりません」;Message({message:‘要求エラー,このリソースが見つからなかった’,type:‘error’});break case 405: error.Message=「リクエストメソッドが許可されていません」;Message({message:‘リクエストメソッドが許可されていません’,type:‘info’});break case 408: error.Message=「リクエストタイムアウト」;Message({message:‘リクエストタイムアウト’,type:‘info’});break case 500: error.Message=「サーバ側エラー」;Message({message:‘サーバ側エラー’,type:‘error’});break case 501: error.Message=「ネットワークが実現していない」;Message({message:‘ネットワーク未実現’,type:‘info’});break case 502: error.Message=「ネットワークエラー」;Message({message:‘ネットワークエラー’,type:‘error’});break case 503: error.Message=「サービスは利用できません」;Message({message:‘サービスは利用できません’,type:‘info’});break case 504: error.Message=「ネットワークタイムアウト」;Message({message:‘ネットワークタイムアウト’,type:‘warning’});break case 505: error.Message='httpバージョンではリクエストはサポートされていません.Message({message:‘httpバージョンはこのリクエストをサポートしていません’,type:‘warning’});break default: error.message = ${error.response.status} ; Message({ message: ' '${error.response.status} , type: ‘warning’ }); } }/* Else{error.message="サーバへの接続に失敗しました";Message({message:‘サーバへの接続に失敗しました’,type:‘warning’});}*/return Promise.reject(error); });
//getメソッドとpostメソッドのカプセル化
/**

getメソッド、getリクエスト

に対応

@param{String}url[要求されたurlアドレス]

@param{Object}params[要求時に持ち運ぶパラメータ]/export function get(url,params){return new Promise((resolve,reject)=>{/var Load=Loading.service({text:‘少々お待ちください’,background:‘rgba(28,36,51,0.8)’,target:document.querySelector(’.table’)})*/axios.get(url, { params: params }).then(res=>{resolve(res.data);//Load.close();//Loading.service(true).close();//Message({message:'成功を求める',type:'success');}).catch(err=>{reject(err.response.data)/Load.close();//Loading.service(true).close();//Message({message:‘ロード失敗’,type:‘error’});})})});}

/**

postメソッド、postリクエスト

に対応

@param{String}url[要求されたurlアドレス]

@param{Object}params[要求時に持ち運ぶパラメータ]/export function post(url,params){return new Promise((resolve,reject)=>{/var Load=Loading.service({text:‘少々お待ちください’,background:‘rgba(28,36,51,0.8)’,target:document.querySelector(’#Zbc p>.table’)})*/axios.post(url, params) .then(res=>{resolve(res.data);//Load.close();//Message({message:‘成功を求める’,type:‘success’});}).catch(err => { if (err.response) { reject(err.response.data) }//Load.close();//Loading.service(true).close();//Message({message:‘ロード失敗’,type:‘error’})})})})}}}}}}}}}}}}}}}}}}}}}}}}}}}}}