Nuxt : Why does a function emit the timeout error, even after it got the response as success?

Question

I want to check the status of 62 servers, and 52 servers are not connected(those will be 'off' on the table), and 1*2 servers are connected well(those will be 'on' on the table)

But, when I make the requests to all the 62 servers at the mounted hook, then 62 all are 'off' on the table, even connected 12, either. When I make the requests to only connect then those 12 are 'on' on the table. I want to know why this happens. And in fact, in 'chrome console' it showed that vue got the responses from not connected 32(router axios error) and connected 12 (res.status => 200), but after then it showed timeout error even some of the 6*2 servers got a response! I want to know why this happens, too.

Briefly,

Why didn't it change the status value of each server as written, even it got the response as success?
Why did it emit the timeout error even it got the response?

I started this server with 'npm run dev'.

component/Lnb.vue

<template>
    <div>
        <table>
          <tr>
            <th></th>
            <th>Agent</th>
            <th>Engine</th>
          </tr>
          <tr>
            <td><b>n1</b></td>
            <td><span v-if="nServer1a == true" >on</span><span v-else >off</span></td>
            <td><span v-if="nServer1e == true" >on</span><span v-else >off</span></td>
          </tr>
          <tr>
            <td><b>n2</b></td>
            <td><span v-if="nServer2a == true" >on</span><span v-else >off</span></td>
            <td><span v-if="nServer2e == true" >on</span><span v-else >off</span></td>
          </tr>
          <tr>
            <td><b>n3</b></td>
            <td><span v-if="nServer3a == true" >on</span><span v-else >off</span></td>
            <td><span v-if="nServer3e == true" >on</span><span v-else >off</span></td>
          </tr>
          <tr>
            <td><b>n4</b></td>
            <td><span v-if="nServer4a == true" >on</span><span v-else >off</span></td>
            <td><span v-if="nServer4e == true" >on</span><span v-else >off</span></td>
          </tr>
          <tr>
            <td><b>n5</b></td>
            <td><span v-if="nServer5a == true" >on</span><span v-else >off</span></td>
            <td><span v-if="nServer5e == true" >on</span><span v-else >off</span></td>
          </tr>
          <tr>
            <td><b>c3</b></td>
            <td><span v-if="cServer3a == true" >on</span><span v-else >off</span></td>
            <td><span v-if="cServer3e == true" >on</span><span v-else >off</span></td>
          </tr>
        </table>        
    </div>
</template>
<script>
import {
  notConnected1agent,
  notConnected1engine,
  notConnected2agent,
  notConnected2engine,
  notConnected3agent,
  notConnected3engine,
  notConnected4agent,
  notConnected4engine,
  notConnected5agent,
  notConnected5engine,
  connected3agent,
  connected3engine,
} from '@/api/servers'

export default {
  name: 'Navbar',
  data() {
    return {
      nServer1a: false,
      nServer1e: false,
      nServer2a: false,
      nServer2e: false,
      nServer3a: false,
      nServer3e: false,
      nServer4a: false,
      nServer4e: false,
      nServer5a: false,
      nServer5e: false,
      //test
      cServer3a: false,
      cServer3e: false,
    }
  },
  mounted(){
    this.getNotConnectedServerStatus()
    this.connectedStatus()
  },
  methods: {
    getS1a(){
      notConnected1agent()
      .then((res) => {
        try {
          console.log('getS1a res.status >>>>>>',res.data.status_a)
          if(res.data.status_a==200){
            this.nServer1a = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS1a ${err}`)
      })
    },
    getS1e(){
      notConnected1engine()
      .then((res) => {
        try {
          console.log('getS1e res.status =>',res.data.status_e);
          if(res.data.status_e==200){
            this.nServer1e = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS1e ${err}`)
      })
    },
    getS2a(){
      notConnected2agent()
      .then((res) => {
        try {
          console.log('getS2a res.status >>>>>>',res.data.status_a)
          if(res.data.status_a==200){
            this.nServer2a = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS2a ${err}`)
      })
    },
    getS2e(){
      notConnected2engine()
      .then((res) => {
        try {
          console.log('getS2e res.status =>',res.data.status_e);
          if(res.data.status_e==200){
            this.nServer2e = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS2e ${err}`)
      })
    },
    getS3a(){
      notConnected3agent()
      .then((res) => {
        try {
          console.log('getS3a res.status >>>>>>',res.data.status_a)
          if(res.data.status_a==200){
            this.nServer3a = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS3a ${err}`)
      })
    },
    getS3e(){
      notConnected3engine()
      .then((res) => {
        try {
          console.log('getS3e res.status =>',res.data.status_e);
          if(res.data.status_e==200){
            this.nServer3e = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS3e ${err}`)
      })
    },
    getS4a(){
      notConnected4agent()
      .then((res) => {
        try {
          console.log('getS4a res.status >>>>>>',res.data.status_a)
          if(res.data.status_a==200){
            this.nServer4a = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS4a ${err}`)
      })
    },
    getS4e(){
      notConnected4engine()
      .then((res) => {
        try {
          console.log('getS4e res.status =>',res.data.status_e);
          if(res.data.status_e==200){
            this.nServer4e = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS4e ${err}`)
      })
    },
    getS5a(){
      notConnected5agent()
      .then((res) => {
        try {
          console.log('getS5a res.status >>>>>>',res.data.status_a)
          if(res.data.status_a==200){
            this.nServer5a = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS5a ${err}`)
      })
    },
    getS5e(){
      notConnected5engine()
      .then((res) => {
        try {
          console.log('getS5e res.status =>',res.data.status_e);
          if(res.data.status_e==200){
            this.nServer5e = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getS5e ${err}`)
      })
    },
    getNotConnectedServerStatus(){
      this.getS1a();
      this.getS1e();
      this.getS2a();
      this.getS2e();
      this.getS3a();
      this.getS3e();
      this.getS4a();
      this.getS4e();
      this.getS5a();
      this.getS5e();
    },
    getConnected3a(){
      connected3agent()
      .then((res) => {
        try {
          console.log('connected3agent res.status >>>>>>',res.data.status_a)
          if(res.data.status_a==200){
            this.cServer3a = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getConnected3a ${err}`)
      })
    },
    getConnected3e(){
      connected3engine()
      .then((res) => {
        try {
          console.log('connected3engine res.status =>', res.data.status_e)
          if(res.data.status_e==200){
            this.cServer3e = true;
          }
        } catch (error) {
          console.log(error)
        }
      }).catch((err) =>{
        console.log(`getConnected3e ${err}`)
      })
    },
    connectedStatus(){
      this.getConnected3a()
      this.getConnected3e()
    },
  },
}
</script>

api/lnbServers.js

import axios from 'axios'
import { headers } from '../config/env'

export function notConnected1agent() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s1agent', { headers })
}

export function notConnected1engine() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s1engine', { headers })
}

export function notConnected2agent() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s2agent', { headers })
}

export function notConnected2engine() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s2engine', { headers })
}

export function notConnected3agent() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s3agent', { headers })
}

export function notConnected3engine() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s3engine', { headers })
}

export function notConnected4agent() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s4agent', { headers })
}

export function notConnected4engine() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s4engine', { headers })
}

export function notConnected5agent() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s5agent', { headers })
}

export function notConnected5engine() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/s5engine', { headers })
}

export function connected3agent() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/connected3agent', { headers })
}
export function connected3engine() {
  axios.defaults.timeout = 5000;
  return axios.get('/api/lnbServers/connected3engine', { headers })
}

server/routes/api.js

//(...)
router.get('/lnbServers/s1agent', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
        result = await axios.get(
        'http://notConnectedURL151:11111/not/connected'
        ).catch(function (error){console.log('s1agent >>', error.message);})
        if(!result){
        response.json({status_a: 'router axios error'})
        }else{
        response.json({status_a: result.status})
        }
    } catch (err) {
        console.log(err)
        response.json({status_a: 'err'})
    }
})
router.get('/lnbServers/s1engine', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL151:22222/not/connected'
      ).catch(function (error){console.log('s1engine >>', error.message);})
      if(!result){
        response.json({status_e: 'router axios error'})
      }else{
        response.json({status_e: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_e: 'err'})
    }
  
})
  
router.get('/lnbServers/s2agent', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL156:11111/not/connected'
      ).catch(function (error){console.log('s2agent >>', error.message);})
      if(!result){
        response.json({status_a: 'router axios error'})
      }else{
        response.json({status_a: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_a: 'err'})
    }
})
router.get('/lnbServers/s2engine', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL156:22222/not/connected'
      ).catch(function (error){console.log('s2engine >>', error.message);})
      if(!result){
        response.json({status_e: 'router axios error'})
      }else{
        response.json({status_e: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_e: 'err'})
    }
})
  
router.get('/lnbServers/s3agent', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL161:11111/not/connected'
      ).catch(function (error){console.log('s3agent >>', error.message);})
      if(!result){
        response.json({status_a: 'router axios error'})
      }else{
        response.json({status_a: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_a: 'err'})
    }
})
router.get('/lnbServers/s3engine', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL161:22222/not/connected'
      ).catch(function (error){console.log('s3engine >>', error.message);})
      if(!result){
        response.json({status_e: 'router axios error'})
      }else{
        response.json({status_e: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_e: 'err'})
    }
})
  
router.get('/lnbServers/s4agent', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL166:11111/not/connected'
      ).catch(function (error){console.log('s4agent >>', error.message);})
      if(!result){
        response.json({status_a: 'router axios error'})
      }else{
        response.json({status_a: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_a: 'err'})
    }
})
router.get('/lnbServers/s4engine', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL166:22222/not/connected'
      ).catch(function (error){console.log('s4engine >>', error.message);})
      if(!result){
        response.json({status_e: 'router axios error'})
      }else{
        response.json({status_e: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_e: 'err'})
    }
})
  
router.get('/lnbServers/s5agent', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL171:11111/not/connected'
      ).catch(function (error){console.log('s5agent >>', error.message);})
      if(!result){
        response.json({status_a: 'router axios error'})
      }else{
        response.json({status_a: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_a: 'err'})
    }
})
router.get('/lnbServers/s5engine', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://notConnectedURL171:22222/not/connected'
      ).catch(function (error){console.log('s5engine >>', error.message);})
      if(!result){
        response.json({status_e: 'router axios error'})
      }else{
        response.json({status_e: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_e: 'err'})
    }
})
  
router.get('/lnbServers/connected3agent', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://connectedURL:11111/connected'
      ).catch(function (error){console.log('connected3agent axios catch Error >>>', error.message);})
      if(!result){
        response.json({status_a: 'router axios error'})
      }else{
        response.json({status_a: result.status})
      }
    } catch (err) {
      response.json({status_a: 'err'})
    }
})
router.get('/lnbServers/connected3engine', async (request, response) => {
    axios.defaults.timeout = 2500;
    let result = {}
    try {
      result = await axios.get(
        'http://connectedURL:22222/connected'
      ).catch(function (error){console.log('connected3engine axios catch Error >>>', error.message);})
      if(!result){
        response.json({status_e: 'router axios error'})
      }else{
        response.json({status_e: result.status})
      }
    } catch (err) {
      console.log(err)
      response.json({status_e: 'err'})
    }
})

module.exports = router

chrome console

Lnb.vue?1677:254 getS1a res.status >>>>>> router axios error
Lnb.vue?1677:299 getS2e res.status => router axios error
Lnb.vue?1677:269 getS1e res.status => router axios error
Lnb.vue?1677:284 getS2a res.status >>>>>> router axios error
Lnb.vue?1677:329 getS3e res.status => router axios error
Lnb.vue?1677:314 getS3a res.status >>>>>> router axios error
Lnb.vue?1677:439 connected3engine res.status => 200
client.js?1b93:95 [HMR] connected
Lnb.vue?1677:424 connected3agent res.status >>>>>> 200
Lnb.vue?1677:352 getS4a Error: timeout of 5000ms exceeded
Lnb.vue?1677:367 getS4e Error: timeout of 5000ms exceeded
Lnb.vue?1677:382 getS5a Error: timeout of 5000ms exceeded
Lnb.vue?1677:397 getS5e Error: timeout of 5000ms exceeded
Lnb.vue?1677:262 getS1a Error: timeout of 5000ms exceeded
Lnb.vue?1677:277 getS1e Error: timeout of 5000ms exceeded
Lnb.vue?1677:292 getS2a Error: timeout of 5000ms exceeded
Lnb.vue?1677:307 getS2e Error: timeout of 5000ms exceeded
Lnb.vue?1677:322 getS3a Error: timeout of 5000ms exceeded
Lnb.vue?1677:337 getS3e Error: timeout of 5000ms exceeded
Lnb.vue?1677:352 getS4a Error: timeout of 5000ms exceeded
Lnb.vue?1677:367 getS4e Error: timeout of 5000ms exceeded
Lnb.vue?1677:382 getS5a Error: timeout of 5000ms exceeded
Lnb.vue?1677:397 getS5e Error: timeout of 5000ms exceeded
Lnb.vue?1677:432 getConnected3a Error: timeout of 5000ms exceeded
Lnb.vue?1677:447 getConnected3e Error: timeout of 5000ms exceeded

There is a lot of code that could be a one-liner with some dynamic values. Besides the huge chunk of code and the possible improvements, do you want to run your HTTP calls in parallel or sequentially here? — kissu, Nov 24 '21 at 08:50
Those are almost same code to each other, just almost are copied and pasted. Anyway, I want to run my HTTP calls in parallel and I need to run the calls in parallel — niddddddfier, Nov 24 '21 at 23:55
Yeah, why some many copy/pasta, you maybe did a typo somewhere hence why you do have an error. Try to simplify your code and keep it clean with `async/await`. Also, do you have an ESlint error somewhere maybe? Try this one if you want to execute those calls in parallel: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all — kissu, Nov 25 '21 at 00:00
Thank you for your help! I don't use ESlint so it wouldn't happen. Anyway I'll read that document, thanks for your help again. — niddddddfier, Nov 25 '21 at 03:50
Maybe try to add it quickly, the setup is [not super complex](https://stackoverflow.com/a/68880413/8816585), it'll help you greatly overall today and in the future. Also, maybe try to narrow down your issue by commenting some parts of your code and see at which point something is breaking. Or please provide us some [repro] if you want some more useful help. It's pretty difficult to help here because it could come from a lot of things like the backend, some limitations coming from the browser/HTTP calls, a typo somewhere in the code etc... — kissu, Nov 25 '21 at 07:13
I thought this error came from the amount of the small errors so I wrote almost all code. When I run smaller code then it works well(little slow though) — niddddddfier, Nov 26 '21 at 14:13
Spamming your browsers with HTTP calls will definitely not help indeed. Still, a refacto cannot hurt here. — kissu, Nov 26 '21 at 16:14

Nuxt : Why does a function emit the timeout error, even after it got the response as success?

0 Answers0