如何设置Vue Axios的超时时间

为了设置 vue axios 的超时时间，我们可以创建 axios 实例并指定超时选项：在全局设置中：vue.prototype.$axios = axios.create({ timeout: 5000 })；在单个请求中：this.$axios.get('/api/users', { timeout: 10000 })。

如何设置 Vue Axios 的超时时间

Axios 是一个流行的 JavaScript 库，用于进行 HTTP 请求。在 Vue 中，我们可以使用 Axios 来与后端服务器进行通信。默认情况下，Axios 不会设置超时时间，这可能会导致应用程序挂起或无限期地等待服务器响应。为了解决这个问题，我们可以设置 Axios 的超时时间。

设置全局超时时间

要在全局设置 Axios 的超时时间，可以在 main.js 文件中执行以下操作：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios.create({
  timeout: 5000, // 5 秒超时时间
})

设置单个请求的超时时间

有时，我们可能希望为特定请求设置不同的超时时间。我们可以使用 timeout 配置选项在单个请求配置中设置超时时间：

this.$axios.get('/api/users', {
  timeout: 10000, // 10 秒超时时间
})

超时响应

如果请求在指定时间内没有收到响应，Axios 就会触发一个 timeout 错误。我们可以处理这个错误并采取适当的措施，比如显示错误消息或重试请求。

this.$axios.get('/api/users')
  .then((response) => {
    // 请求成功
  })
  .catch((error) => {
    if (error.code === 'ECONNABORTED') {
      // 超时错误
    }
  })