Vue a-t-il un délai d'attente par défaut ?

Vue est un framework JavaScript populaire qui permet aux développeurs de créer plus facilement des applications Web dynamiques et réactives. Vue fournit un système de composants puissant et des fonctionnalités utiles telles que des hooks de cycle de vie et une liaison de données réactive. Dans Vue, le délai d'attente n'est pas une fonction intégrée, mais il peut être implémenté à l'aide de minuteries, de gardes de routage, d'intercepteurs HTTP et d'autres technologies.

Tout d’abord, comprenons ce qu’est le délai d’attente. Le délai d'attente fait référence à la méthode d'interruption ou de fermeture forcée de l'opération lorsqu'il n'y a pas de réponse ou d'achèvement de l'opération dans un certain laps de temps. Dans les applications Web, les délais d'attente sont souvent utilisés pour garantir que les utilisateurs ne restent pas connectés ou ne demandent pas de données pendant de longues périodes sans activité.

Dans Vue, nous pouvons utiliser la fonction setTimeout de JavaScript pour simuler la fonction timeout. La fonction setTimeout peut exécuter une fonction après une certaine période de temps. Par exemple, nous pouvons démarrer une minuterie après la connexion de l'utilisateur, et si l'utilisateur est resté inactif pendant plus d'une période de temps définie, nous pouvons automatiquement le déconnecter et revenir à la page de connexion.

created () {
  this.timer = setTimeout(() => {
    this.logout()
  }, 30 * 60 * 1000) // 30分钟后超时
},
methods: {
  resetTimer () {
    clearTimeout(this.timer)
    this.created()
  },
  logout () {
    // 执行登出操作
  }
},

Dans le code ci-dessus, nous démarrons une minuterie dans le hook de cycle de vie créé par le composant. Lorsque l'utilisateur effectue une opération, nous pouvons réinitialiser la minuterie en appelant la méthode resetTimer. Si le délai expire, la méthode de déconnexion est automatiquement appelée pour effectuer l'opération de déconnexion.

En plus d'utiliser des minuteries pour simuler les délais d'attente, Vue fournit également des gardes de routage pour protéger l'accès aux pages de routage. Les gardes d'itinéraire sont des fonctions exécutées pendant la navigation sur l'itinéraire et peuvent être utilisées pour contrôler l'accès à l'itinéraire ou effectuer certaines opérations. Dans Vue, les gardes de routage incluent les gardes avant globaux, les gardes de poste globaux et les gardes intégrés aux composants.

router.beforeEach((to, from, next) => {
  const logged = sessionStorage.getItem('logged')
  if (!logged && to.path !== '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

Dans le code ci-dessus, nous utilisons le front guard global pour vérifier l'état de connexion. Si l'utilisateur n'est pas connecté et ne visite pas la page de connexion, il accédera automatiquement à la page de connexion.

En plus des gardes de route, Vue fournit également des intercepteurs HTTP pour gérer les requêtes et les réponses. Nous pouvons ajouter un paramètre de délai d'attente dans l'en-tête de la requête ou vérifier l'état du délai d'attente en interceptant la réponse.

axios.interceptors.request.use(config => {
  config.timeout = 10000 // 设置超时时间为10s
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  const { status } = response
  if (status === 408) {
    // 超时处理逻辑
  }
  return response;
})

Dans le code ci-dessus, nous utilisons l'intercepteur HTTP pour définir le délai d'attente avant la requête et vérifions si le code d'état est 408 timeout status dans l'intercepteur de réponse.

Pour résumer, Vue elle-même n'a pas de fonction de délai d'attente intégrée, mais elle peut être simulée et implémentée en utilisant des minuteries, des gardes de routage, des intercepteurs HTTP et d'autres technologies. Ces technologies peuvent nous aider à mettre en œuvre des applications Web plus sécurisées et plus fiables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!