Javascript axios在我的vue应用程序中每次发出两个请求
当我调用Axios request以获取数据或发布数据时,Axios发送两个而不是一个请求,我几乎在任何地方都会使用我的应用程序。我没有发现我的代码有任何问题 这是我的组件Javascript axios在我的vue应用程序中每次发出两个请求,javascript,vue.js,ionic-framework,axios,vuejs3,Javascript,Vue.js,Ionic Framework,Axios,Vuejs3,当我调用Axios request以获取数据或发布数据时,Axios发送两个而不是一个请求,我几乎在任何地方都会使用我的应用程序。我没有发现我的代码有任何问题 这是我的组件 <template> <ion-page> <ion-header> <ion-toolbar> <ion-title>My Right Hand Men</ion-title> </ion-to
<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>
我不知道哪里出了问题,我看到有更多的人遇到同样的问题,但我没有看到正确的解决方案,我可能错过了一些东西
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" && config.url!="/api/staff/save-fcm-token" && 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" && response.config.url!="/api/staff/save-fcm-token" && 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" && error.config.url!="/api/staff/save-fcm-token" && 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;