axiosのinterceptorsを記載→ajaxが失敗で返ってくる

Question

Laravel5.5 vue.jsを使用し、AJAXを使った実装
→load中にとあるgifファイルを表示させたい
→ajax起動直前にdataに収めてあるloading : falseをtrueにし、html上で表示させる
→https://stackoverflow.com/questions/43969324/how-to-implement-a-before-callback-in-axiosを参考に
以下AJAXの実装部分　

Vue.prototype.$http = axios;

const schedule = new Vue({
    el: '#schedule',
    data: {
        available_teachers : available_teachers,
        loading : false,
    },
    methods: {
        change_date:function(date_id){
            const data = { date_id : date_id};
            var self = this;//ここでのthisはchange_dateメソッドの呼び出し関数なので、そのobjectであるscheduleを意味する

            axios.interceptors.request.use(function(){
                return self.loading = true;
            });
            axios.post('/ajax/reservation_calender/change_date', data)
                  .then(function(res){
                    	self.available_teachers = res.data.available_teachers;
                    	self.loading = false;
                }).catch(function(error){
                        self.loading = false;
            });
        },
        //省略

コード内にも記載しましたが、interceptorsを記載するとajax起動されますが、失敗で返ってきます。(interceptorsのコード抜きだと成功する)
関数の書き方など変えておりますが、成功しません。。
よろしくお願いいたします。

//一応html部分も
<div v-if="loading">
	<img :src="/images/hoge.gif">
</div>

Answer 1

interseptors は原則サーバーからのレスポンスを処理してレスポンスを返すものです。
function (res) {
res.c = res.a + res.b
return res
}
のような関数を渡さないといけません
質問のコードだと
“帰ってきたデータを破棄（引数をとらない）してself.loading をレスポンスとして返す。ことになります。
this.loading = true
をaxios.post(...の直前におくのが正解と思われます。
強引に
function(res) {
self.loading = true
return res
}
とも処理的にはできますが
これはレスポンスのあった時点（処理終了時）にローディングを開始することになり本末転倒です

Comments

[kazoogon]

ただ単に処理の前に書いておけばよかっただけなんですね。
難しく考えすぎていました、ありがとうございます。