[Vuejs]-Javascript: Axios network request 30s response timeout

Sharing an example of how this can be done in Vue/Nuxt with or without Vuex state. Note that I have set the checking interval to 30 seconds in setApiCheckInterval () (APIStatusPage.vue). Hope this can give you some ideas:

// 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>