Блог

Я использую свое приложение почти везде, когда я вызываю запрос Axios, чтобы получить данные или опубликовать их, Axios отправляет два запроса вместо одного. Я не нашел ничего неправильного в своем коде.

Вот мой компонент

 <template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>My Right Hand Men</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">My Right Hand Men</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-list>
        <ion-item v-for="(right_hand_man, index) in right_hand_men" :key="index">
          <ion-label text-wrap>{{ right_hand_man.id }} - {{ right_hand_man.name }}</ion-label>
          <ion-text slot="end" @click="remove(right_hand_man.id)" color="danger">Remove</ion-text>
          <ion-text

            slot="end"
            @click="() => router.push(`/staff/${right_hand_man.id}/right_hand_man`)"
            color="warning"
          >View</ion-text>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script >
import {
  IonPage,
  ionText,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonItem,
  IonList,
  IonLabel,
} from "@ionic/vue";
import ApiService from "@/services/api.service";
import { TokenService } from "@/services/token.service";
import { useRouter } from "vue-router";
export default {
  name: "Tab3",
  data() {
    return {
      right_hand_men: "",
    };
  },
  components: {
    IonHeader,
    ionText,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonItem,
    IonList,
    IonLabel,
  },
  methods: {
    remove(rhm_id) {
      ApiService.post(`api/gangBoss/remove-rhm`, { rhm: rhm_id }).then(
        async () => {
          await this.getRightHandMen();
        }
      );
    },
    getRightHandMen: function () {
      const boss_id = TokenService.getUserInfo().id;

      return ApiService.get(`/api/gangBoss/get-boss-rhm/${boss_id}`).then(
        (response) => {
          this.right_hand_men = response.data;
          console.log(this.right_hand_men);
        }
      );
    },
  },
  setup() {
    const router = useRouter();
    return { router };
  },
  created() {
    this.getRightHandMen();
  },
 
};
</script>
<style scoped>
ion-list ion-item {
  background-color: #f0f8ff;
  /* margin-top: 7px; */
  margin-bottom: 0px;
}
</style>
 

У меня есть глобальный перехватчик для запроса axios, который выглядит так

 import axios from "axios";
import {store} from '@/store';
import {TokenService} from "@/services/token.service";
import {loadingController} from '@ionic/vue';


const ApiService = {
    _requestInterceptor: 0,
    _401interceptor: 0,

    init(baseURL)
    {
        axios.defaults.baseURL = baseURL;
    },

    setHeader() {
        axios.defaults.headers.common[
            "Authorization"
            ] = `Bearer ${TokenService.getToken()}`;
            axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
         
    },

    removeHeader() {
        axios.defaults.headers.common = {};
    },

    get(resource ) {
      
        return axios.get(resource);
    },

    post(resource, data) {
        return axios.post(resource, data);
    },

    put(resource, data) {
        return axios.put(resource, data);
    },

    delete(resource) {
        return axios.delete(resource);
    },

    customRequest(data) {
        return axios(data);
    },

    mountRequestInterceptor() {
        
        this._requestInterceptor = axios.interceptors.request.use(async config => {
            console.log(config.url)
           if(config.url != "/api/staff/get-notifications" amp;amp; config.url!="/api/staff/save-fcm-token" amp;amp; config.url!="/api/staff/get-work-order-id"){
            console.log("show loading");
            const loading = await loadingController.create({
                message: 'Please wait...'
            });
 
            await loading.present();
        }
            return config;
        });
        
    },

    mount401Interceptor() {
        this._401interceptor = axios.interceptors.response.use(
          async   response => {
            if(response.config.url != "/api/staff/get-notifications" amp;amp; response.config.url!="/api/staff/save-fcm-token" amp;amp; response.config.url!="/api/staff/get-work-order-id"){
             await   loadingController.dismiss().then(r => console.log(r));
               console.log('close')
            }
                return response;
            },
            async error => {
                if(error.config.url != "/api/staff/get-notifications" amp;amp; error.config.url!="/api/staff/save-fcm-token" amp;amp; error.config.url!="/api/staff/get-work-order-id"){
               await loadingController.dismiss().then(r => console.log(r));
                }
                if (error.request.status === 401) {
              
                    if (error.config.url.includes("/api/staff/token")) {
                        await store.dispatch("/api/staff/logout");
                    
                        throw error;
                        
                    } else {
                        try {
                      
                            await store.dispatch("auth/refreshToken");
                        
                            return this.customRequest({
                                method: error.config.method,
                                url: error.config.url,
                                data: error.config.data
                            });
                        } catch (e) {
                        
                            throw error;
                           
                        } 
                    }
                }
              
                throw error;
            }
        );
    },

    unmount401Interceptor() {
        axios.interceptors.response.eject(this._401interceptor);
    }
}

export default ApiService;

 

Я не знаю, где что-то идет не так, я вижу, что есть больше людей, испытывающих ту же проблему, но я не видел правильного решения, возможно, я что-то пропустил