vue-resource インターセプターの使用に関する詳細な説明

/*Vueフレームワークの紹介*/
'vue' から Vue をインポートします
/*リソース要求プラグインを導入する*/
'vue-resource' から VueResource をインポートします。

/*VueResourceプラグインを使用する*/
Vue.use(Vueリソース)

Vue.http.interceptors.push((リクエスト、次) => {
 console.log(this) //これはリクエストされたページのVueインスタンスです //リクエストを変更します
 request.method = 'POST'; // リクエストの前にいくつかの前処理と構成を行うことができます // 次のインターセプターに進みます
  next((response) =>{//レスポンスの後、レスポンスをthenに渡す前に、レスポンスを修正して論理的な判断を下します。トークンの有効期限が切れたかどうかの判断は、ここで追加します。ページ内のすべてのhttpリクエストは、最初にこのメソッドを呼び出します。response.body = '...';
    応答を返します。

 });
});

//1. 読み込みコンポーネントを追加する <template id='loading-template'>
  <div class='loading-overlay'></div>
</テンプレート>

//2. 読み込みコンポーネントを別の Vue インスタンスのサブコンポーネントとして使用する var help = new Vue({
  el: '#ヘルプ',
  データ： {
    表示読み込み: false
  },
  コンポーネント:
    '読み込み中': {
      テンプレート: '#loading-template',
    }
  }
})

//3. Vue インスタンスを HTML 要素にマウントする <div id='help'>
  <読み込み中 v-show='読み込み中'></読み込み中>
</div>

//4. インターセプターを追加する
Vue.http.interceptors.push((リクエスト、次) => {
  読み込み中.show = true;
  次へ((レスポンス) => {
    読み込み中.show = false;
    応答を返します。
  });
});

//1. 上記の読み込みコンポーネントを引き続き使用し、#help 要素の下にダイアログボックス <div id='help'> を追加します。
  <読み込み中 v-show='読み込み中' ></読み込み中>
  <モーダルダイアログ:show='showDialog'>
    <header class='ダイアログ ヘッダー' slot='ヘッダー'>
      <h3 class='dialog-title'>サーバー エラー</h3>
    </ヘッダー>
    <div class='ダイアログボディ' slot='ボディ'>
      <p class='error'>申し訳ありません。サーバーにエラーが発生しました。エラー コード: {{errorCode}}.</p>
    </div>
  </モーダルダイアログ>
</div>

//2. ヘルプインスタンスのデータオプションに2つのプロパティを追加します。var help = new Vue({
    el: '#ヘルプ',
    データ： {
      表示読み込み: false、
      表示ダイアログ: false、
      エラーコード: ''
    },
    コンポーネント:
      '読み込み中': {
        テンプレート: '#loading-template',
      }
    }
  })

//3. インターセプターを変更する
Vue.http.interceptors.push((リクエスト、次) => {
  help.showLoading = true;
  次へ((レスポンス) => {
    if(!response.ok){
      help.errorCode = レスポンスステータス;
      help.showDialog = true;
    }
    help.showLoading = false;
    応答を返します。
  });
});