vue にはデフォルトでタイムアウトがありますか?

Vue は、開発者が動的で応答性の高い Web アプリケーションを簡単に構築できるようにする人気の JavaScript フレームワークです。 Vue は、強力なコンポーネント化されたシステムと、ライフサイクル フックやリアクティブ データ バインディングなどのいくつかの便利な機能を提供します。 Vue では、タイムアウトは組み込み関数ではありませんが、タイマー、ルーティング ガード、HTTP インターセプター、その他のテクノロジーを使用して実装できます。

まず、タイムアウトとは何かを理解しましょう。タイムアウトとは、一定時間内に操作の応答や完了がない場合に、操作を強制的に中断または終了する方法のことです。 Web アプリケーションでは、ユーザーが長時間アクティビティを行わずにログインしたままになったり、データを要求したりしないようにするために、タイムアウトがよく使用されます。

Vue では、JavaScript の setTimeout 関数を使用してタイムアウト関数をシミュレートできます。 setTimeout 関数を使用すると、一定時間後に関数を実行できます。たとえば、ユーザーがログインした後にタイマーを開始し、ユーザーが一定期間非アクティブな場合、ユーザーを自動的にログアウトしてログイン ページに戻ることができます。

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

上記のコードでは、コンポーネントの作成されたライフサイクル フックでタイマーを開始します。ユーザーが何らかの操作を実行すると、resetTimer メソッドを呼び出すことでタイマーをリセットできます。タイマーがタイムアウトすると、logout メソッドが自動的に呼び出され、ログアウト操作が実行されます。

タイマーを使用してタイムアウトをシミュレートすることに加えて、Vue はルーティング ページへのアクセスを保護するルーティング ガードも提供します。ルート ガードは、ルート ナビゲーション中に実行される機能であり、ルート アクセスの制御や一部の操作の実行に使用できます。 Vue では、ルーティング ガードには、グローバル フロント ガード、グローバル ポスト ガード、およびコンポーネント内ガードが含まれます。

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

上記のコードでは、グローバル フロント ガードを使用してログイン ステータスをチェックします。ユーザーがログインしておらず、ログイン ページにアクセスしていない場合は、自動的にログイン ページにジャンプします。

ルート ガードに加えて、Vue はリクエストと応答を処理する HTTP インターセプターも提供します。リクエストヘッダーにタイムアウトパラメータを追加したり、レスポンスをインターセプトしてタイムアウトステータスを確認したりできます。

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;
})

上記のコードでは、HTTP インターセプターを使用してリクエストの前にタイムアウトを設定し、レスポンス インターセプターでステータス コードが 408 タイムアウト ステータスであるかどうかを確認します。

要約すると、Vue 自体にはタイムアウト機能が組み込まれていませんが、タイマー、ルーティング ガード、HTTP インターセプターなどのテクノロジを使用してシミュレートおよび実装できます。これらのテクノロジーは、より安全で信頼性の高い Web アプリケーションを実装するのに役立ちます。

以上がvue にはデフォルトでタイムアウトがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。