Javascript：Axios 网络请求 30s 响应超时答案

【问题标题】：Javascript: Axios network request 30s response timeoutJavascript：Axios 网络请求 30s 响应超时
【发布时间】：2021-10-26 03:42:20
【问题描述】：

    self.$axios
      .$get(
        `https://verifiedpro.herokuapp.com/getvmsstate?kiosk=${self.kiosk}`
      )
      .catch(error => {
        console.log(error);
        location.reload();
      })
      .then(response => {
        console.log(response.username);
      });
  });

我正在使用上面的代码从网络获取响应，每 30 秒一次，如果没有来自网络的响应，则会生成一个网络错误，并在上面的代码中捕获。我将只做一个 location.reload() 以便重新开始计时。

这 30 秒可以增加到 60 秒吗？

任何帮助将不胜感激。

【问题讨论】：

你试过这个吗？ npmjs.com/package/axios-retry 非常灵活，已经为您完成了一些工作。
@kissu，是的，这行得通，好处是重试内置于 nuxt/axios
如kissu所说，axios中有重试选项，也有设置请求超时的超时选项

标签： javascript node.js vue.js express nuxt.js

【解决方案1】：

分享一个如何在 Vue/Nuxt 中使用或不使用 Vuex 状态的示例。请注意，我在setApiCheckInterval () (APIStatusPage.vue) 中将检查间隔设置为 30 秒。希望这能给你一些想法：


// status.service.js

import axios from 'axios'
import { handleResponse } from '@/helpers/responseHandler'

const apiStatus = async () => {
  try {
    const request = {
      method: 'get',
      url: `${process.env.API_BASE_URL}/status`
    }
    const response = await axios(request)
    return await handleResponse(response)
  } catch (error) {
    return 'The API is offline. Please try again later.'
  }
}

export const statusService = { apiStatus }


// Vuex store/modules/status.js

import error from '@/messages/errors'

const status = {
  state: {
    status: null
  },
  getters: {
    apiStatus: state => state.status
  },
  mutations: {
    apiUnknownStatus (state) {
      state.status = error.status.checkingApiStatus
      // Assume API down if checking status for too long
      setTimeout(() => {
        if (state.status === error.status.checkingApiStatus) {
          state.status = error.status.apiOffline
        }
      }, 9999)
    },
    apiUp (state, payload) {
      state.status = payload.data.msg
    },
    apiMaintenance (state, payload) {
      state.status = payload.data.msg
    },
    apiDown (state) {
      state.status = error.status.apiOffline
    }
  }
}

export default status

// APIStatusPage.vue

<template>
  <p>Service status: {{ apiStatus }}</p>
</template>

<script>
import { statusService } from '@/services/'
import { mapMutations, mapGetters } from 'vuex'

export default {
  name: 'APIStatusPage',
  components: {
    xxxx
  },
  data () {
    return {
      intervalId: 0
    }
  },
  computed: {
    ...mapGetters(['apiStatus'])
  },
  methods: {
    ...mapMutations([
      'apiUnknownStatus',
      'apiUp',
      'apiDown'
    ]),
    async checkApiStatus () {
      const response = await statusService.apiStatus()
      if (response) {
        if (response.data === undefined) {
          this.$store.commit('apiDown')
          // TODO dispatch error msg
          return
        }
        if (response.data.success) {
          this.$store.commit('apiUp', response)
        }
        if (!response.data.success) {
          this.$store.commit('apiMaintenance', response)
          // TODO dispatch error msg
        }
      } else {
        this.$store.commit('apiDown')
        // TODO dispatch error msg
      }
    },
    setApiCheckInterval () {
      // Check if interval is set
      // If not, start checking apiStatus
      // save the interval id in data()
      // @return correct intervalId

      if (this.intervalId === 0) {
        this.intervalId = setInterval(() => {
          this.checkApiStatus()
        }, 30000) // every 30 seconds
        return this.intervalId
      } else {
        return this.intervalId
      }
    }
  },
  created () {
    this.checkApiStatus()
    this.setApiCheckInterval()
  }
}
</script>

【讨论】：